We Keep Coding

CSS Flexbox Display Issue

It is kind of tricky situation I am in now.
I have two templates that need to be displayed based on ng-switch like:
<div class="summary-card" ng-repeat="cardData in summaryCardsCtrl.summaryDetails">
<div ng-switch ="cardData.uniqueCardsDataFlag">
<div ng-switch-when=true>
<div style="background-color: #ccc !important;">
11111 my custom div
</div>
</div>
<div ng-switch-default>
<div class="card">
<div class="card-title" style="text-align: left;" id="{{cardData.label}}">{{cardData.label}}</div>
<div class="card-data">
.....
</div>
</div>
</div>
</div>
</div>
So, the first div when ng-switch is set to true needs to be aligned side by side with the others that get generated by ng-repeat.
something like a css-grid.
The problem is <div class="summary-card" that sets the items to display flex. I cannot modify or change it but I only need this style for the divs generated by ng-repeat.
But now it gets applied to all the divs, like:
div.summary-card {
display: inline-block;
margin: 5px 10px 15px 0px;
display: flex;
}
How can I fix the same?

you should follow dom structure like this
<div class="summary-card">
<div>
<div style="background-color: #ccc !important;">
11111 my custom div
</div>
</div>
<div class="cool-grid">
<div class="card">
<div class="card-title" style="text-align: left;">{{cardData.label}}</div>
<div class="card-data">
.....
</div>
</div>
<div class="card">
<div class="card-title" style="text-align: left;">{{cardData.label}}</div>
<div class="card-data">
.....
</div>
</div>
<div class="card">
<div class="card-title" style="text-align: left;">{{cardData.label}}</div>
<div class="card-data">
.....
</div>
</div>
<div class="card">
<div class="card-title" style="text-align: left;">{{cardData.label}}</div>
<div class="card-data">
.....
</div>
</div>
</div>
</div>
and your css should be something like
.summary-card {
display: flex;
width: 350px
}
.cool-grid {
display: flex;
flex-wrap: wrap;
}
check this out :- https://codepen.io/anon/pen/gzomoN
This is not the complete answer but it will give you some idea
you can also use grid layout if you want
.summary-card {
display: grid;
grid-template-columns: 200px auto;
grid-coloumn-start: 1;
grid-column-end: 1;
}
.cool-grid {
grid-template-columns: 200px auto;
grid-coloumn-start: 1;
grid-column-end: 3;
display: inline-grid;
flex-wrap: wrap;
}

How to contain text in bootstrap 4 card with horizontal scroll card flip component

I'm working on a horizontal scroll allowing for the cards to flip. The problem that i'm having is figuring out how to contain the text to the card. With the property 'white-space: nowrap;' on the .scrollcards class it makes the text go outside of the cards. However, this is also what is allowing the cards to scroll. My question is how to contain the text by wrapping all text in the card while keeping all of the other current properties working as they are now. https://codepen.io/zepzia/pen/opyxKy
<section>
<div class="container-fluid">
<div class="row">
<div class="scrollcards">
<!-- Card Flip -->
<div class="card-flip card-main">
<div class="flip">
<div class="front">
<!-- front content -->
<div class="card">
<img class="card-img-top" src="http://via.placeholder.com/350x150" alt="100%x180" style="height: 180px; width: 100%; display: block;" data-holder-rendered="true">
<div class="card-block">
<h4 class="card-title">Card Flip</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
<div class="back">
<!-- back content -->
<div class="card">
<div class="card-block">
<h4 class="card-title">Card Flip</h4>
<h6 class="card-subtitle text-muted">Support card subtitle</h6>
</div>
<img src="http://via.placeholder.com/350x150" alt="Image [100%x180]" data-holder-rendered="true" style="height: 180px; width: 100%; display: block;">
<div class="card-block">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
</div>
</div>
<!-- End Card Flip -->
<!-- Card Flip -->
<div class="card-flip-one card-main">
<div class="flip-one">
<div class="front">
<!-- front content -->
<div class="card">
<img class="card-img-top" src="http://via.placeholder.com/350x150" alt="100%x180" style="height: 180px; width: 100%; display: block;" data-holder-rendered="true">
<div class="card-block">
<h4 class="card-title">Card Flip</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
<div class="back">
<!-- back content -->
<div class="card">
<div class="card-block">
<h4 class="card-title">Card Flip</h4>
<h6 class="card-subtitle text-muted">Support card subtitle</h6>
</div>
<img src="http://via.placeholder.com/350x150" alt="Image [100%x180]" data-holder-rendered="true" style="height: 180px; width: 100%; display: block;">
<div class="card-block">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
</div>
</div>
<!-- End Card Flip -->
<!-- Card Flip -->
<div class="card-flip-two card-main">
<div class="flip-two">
<div class="front">
<!-- front content -->
<div class="card">
<img class="card-img-top" src="http://via.placeholder.com/350x150" alt="100%x180" style="height: 180px; width: 100%; display: block;" data-holder-rendered="true">
<div class="card-block">
<h4 class="card-title">Card Flip</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
<div class="back">
<!-- back content -->
<div class="card">
<div class="card-block">
<h4 class="card-title">Card Flip</h4>
<h6 class="card-subtitle text-muted">Support card subtitle</h6>
</div>
<img src="http://via.placeholder.com/350x150" alt="Image [100%x180]" data-holder-rendered="true" style="height: 180px; width: 100%; display: block;">
<div class="card-block">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
</div>
</div>
<!-- End Card Flip -->
<!-- Card Flip -->
<div class="card-flip-three card-main">
<div class="flip-three">
<div class="front">
<!-- front content -->
<div class="card">
<img class="card-img-top" src="http://via.placeholder.com/350x150" alt="100%x180" style="height: 180px; width: 100%; display: block;" data-holder-rendered="true">
<div class="card-block">
<h4 class="card-title">Card Flip</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
<div class="back">
<!-- back content -->
<div class="card">
<div class="card-block">
<h4 class="card-title">Card Flip</h4>
<h6 class="card-subtitle text-muted">Support card subtitle</h6>
</div>
<img src="http://via.placeholder.com/350x150" alt="Image [100%x180]" data-holder-rendered="true" style="height: 180px; width: 100%; display: block;">
<div class="card-block">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
</div>
</div>
<!-- End Card Flip -->
<!-- Card Flip -->
<div class="card-flip-four card-main">
<div class="flip-four">
<div class="front">
<!-- front content -->
<div class="card">
<img class="card-img-top" src="http://via.placeholder.com/350x150" alt="100%x180" style="height: 180px; width: 100%; display: block;" data-holder-rendered="true">
<div class="card-block">
<h4 class="card-title">Card Flip</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
<div class="back">
<!-- back content -->
<div class="card">
<div class="card-block">
<h4 class="card-title">Card Flip</h4>
<h6 class="card-subtitle text-muted">Support card subtitle</h6>
</div>
<img src="http://via.placeholder.com/350x150" alt="Image [100%x180]" data-holder-rendered="true" style="height: 180px; width: 100%; display: block;">
<div class="card-block">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
</div>
</div>
<!-- End Card Flip -->
</div>
</div>
</div>
.scrollcards {
background-color: #fff;
overflow: auto;
white-space: nowrap;
height: 550px;
}
div.scrollcards .card-main {
display: inline-block;
padding: 14px;
text-decoration: none;
height: auto;
width: 350px;
}
.card-main .card {
height: 400px;
width: 350px;
white-space: hidden;
}
.card-flip,
.card-flip-one,
.card-flip-two,
.card-flip-three,
.card-flip-four {
perspective: 1000px;
cursor: pointer;
transition: 0.6s;
transform-style: preserve-3d;
}
.flip,
.flip,
.flip-one,
.flip-one,
.flip-two,
.flip-two,
.flip-three,
.flip-three,
.flip-four,
.flip-four{
perspective: 1000px;
transform: rotateY(180deg);
}
.card-flip,
.card-flip-one,
.card-flip-two,
.card-flip-three,
.card-flip-four,
.front,
.back {
width: 100%;
height: 480px;
}
.flip,
.flip-one,
.flip-two,
.flip-three,
.flip-four {
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}
.front,
.back {
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
.front {
z-index: 2;
transform: rotateY(0deg);
}
.back {
transform: rotateY(180deg);
}
var cardFlip = document.querySelector(".card-flip");
cardFlip.addEventListener("click", function(){
cardFlip.classList.toggle("flip");
});
var cardFlipOne = document.querySelector(".card-flip-one");
cardFlipOne.addEventListener("click", function(){
cardFlipOne.classList.toggle("flip-one");
});
var cardFlipTwo = document.querySelector(".card-flip-two");
cardFlipTwo.addEventListener("click", function(){
cardFlipTwo.classList.toggle("flip-two");
});
var cardFlipThree = document.querySelector(".card-flip-three");
cardFlipThree.addEventListener("click", function(){
cardFlipThree.classList.toggle("flip-three");
});
var cardFlipFour = document.querySelector(".card-flip-four");
cardFlipFour.addEventListener("click", function(){
cardFlipFour.classList.toggle("flip-four");
});

i'm not sure how you want the text to be exactly, but if you add this css to your .card-text it will clip your text (keep it contained) and add ellipsis (three dots...) at the end of your text.
CSS:
.card-text {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
Here's a jsFiddle showing the result: https://jsfiddle.net/0184zgjL/
if you want the text to be scrollable, the css will be like this:
.card-text {
white-space: nowrap;
overflow: hidden;
overflow-x: auto;
}
and there will be a scrollbar allowing you to see all the text.
Here's a jsFiddle with this behavior: https://jsfiddle.net/0184zgjL/1/
FINAL EDIT
if you just change the css in the .card-text to be white-space: normal it works..
.card-text {
white-space: normal;
}
here's another jsfiddle: https://jsfiddle.net/0184zgjL/2/

How to create a grid of photos where you can hover them and they will change into other photos?

I'm trying to create a grid of photos where you can hover over them and they will change into other images. I've tried placing the image on CSS as background image but when you hover, the other picture doesn't seem to be exactly the same size (when it actually is).
I also tried using two images method (one on top of the other) and it works well with only one image on the page but with a grid of images, it doesn't work because of the position: absolute.
The only way that I found that "sort of" works is by replacing one image for the other but then you don't have a smooth transition (fade into another image).
Here is the access to code pen (seems to work better):
Code:
css:
.pages-content {
max-width: 400px
}
.left {
padding-left: 5px;
}
.right {
padding-right: 5px;
}
.bottom {
padding-bottom: 10px;
}
img.a {
position: absolute;
left: 0;
top: 0;
z-index: 10;
transition: opacity 1s ease-in-out;
}
img.a:hover {
opacity: 0;
}
img.b {
position: absolute;
left: 0;
top: 0;
}
HTML:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<section class="container pages-content">
<div class="row">
<div class="col-md-12 bottom">
<img src="https://d1mwzmktacfw26.cloudfront.net/wp-content/uploads/2016/04/23105511/Frontier-400x200.jpg" alt="" class="img-fluid"/>
<!-- trying to use hover to change images
<img src="https://d1mwzmktacfw26.cloudfront.net/wp-content/uploads/2016/04/23105511/Frontier-400x200.jpg" alt="" class="img-fluid a"/>
<img src="http://www.tikbok.com/rahalat/wp-content/uploads/2011/08/1-400x200.jpg" alt="" class="img-fluid b"/> -->
</div>
</div>
<div class="row">
<div class="col-md-6 col-sm-12 right">
<img src="http://cheb-room.ru/uploads/cheb/2016/11/w9RC4W-QqXw-200x200.jpg" alt="" class="img-fluid" />
</div>
<div class="col-md-6 col-sm-12 bottom left">
<img src="http://cheb-room.ru/uploads/cheb/2016/11/w9RC4W-QqXw-200x200.jpg" alt="" class="img-fluid" />
</div>
</div>
<!-- Second block -->
<div class="row">
<div class="col-md-6 col-sm-12 right ">
<div class="row">
<div class="col-md-6 push-md-6 col-sm-12 bottom left">
<img src="http://www.animated-gifs.eu/category_cartoons/avatars-100x100-cartoons-spongebob/0038.gif" alt="" class="img-fluid"/>
</div>
<div class="col-md-6 pull-md-6 col-sm-12 bottom right">
<img src="http://www.animated-gifs.eu/category_cartoons/avatars-100x100-cartoons-spongebob/0038.gif" alt="" class="img-fluid"/>
</div>
<div class="col-md-12 bottom">
<img src="http://donsmaps.com/clickphotos/dolnivi200x100.jpg" alt="" class="img-fluid" />
</div>
<div class="col-md-12 bottom">
<img src="http://markcarson.com/images/SunBird-7-200x200.png" alt="" class="img-fluid" />
</div>
</div>
</div><!--./col-md-6-->
<div class="col-md-6 bottom col-sm-12 left project-image">
<img src="http://www.bravacasa.rs/wp-content/uploads/2014/03/Odlaganje-stvari-za-decu-slika-7-505x1025.jpg" width="200" class="img-fluid"/>
</div>
</div><!--./block 2-->
</section>
</body>

I am not sure if this is what you were looking for.
.row {
display: flex;
flex-direction: row;
}
.flex-item {
min-width: 200px;
min-height: 200px;
}
.hover-img {
transition: background-image 1s ease-in-out;
background-size: cover;
}
.img-1 {
background-image: url(https://d1mwzmktacfw26.cloudfront.net/wp-content/uploads/2016/04/23105511/Frontier-400x200.jpg);
width: 400px;
/*
height: 200px;*/
flex-grow: 2;
}
.img-1:hover {
background-image: url(http://www.tikbok.com/rahalat/wp-content/uploads/2011/08/1-400x200.jpg);
}
.img-2 {
background-image: url(http://cheb-room.ru/uploads/cheb/2016/11/w9RC4W-QqXw-200x200.jpg);
/* width: 200px;
height: 200px;*/
flex-grow: 1;
}
.img-2:hover {
background-image: url(http://www.animated-gifs.eu/category_cartoons/avatars-100x100-cartoons-spongebob/0038.gif);
}
.img-3 {
background-image: url(http://donsmaps.com/clickphotos/dolnivi200x100.jpg);
/*width: 200px;
height: 200px;*/
flex-grow: 1;
}
.img-3:hover {
background-image: url(http://markcarson.com/images/SunBird-7-200x200.png);
}
.img-4 {
/*max-width:400px;*/
flex-grow: 2;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<body>
<section class="container pages-content">
<div class="row">
<div class="flex-item hover-img img-1"></div>
<div class="flex-item hover-img img-2"></div>
<div class="flex-item hover-img img-3"></div>
<img src="http://www.bravacasa.rs/wp-content/uploads/2014/03/Odlaganje-stvari-za-decu-slika-7-505x1025.jpg" class="flex-item img-4" />
</div>
</section>
</body>

Ok so I have been playing around with your problem for a bit. I came up with this solution: http://codepen.io/anon/pen/Rpwewg. It appears to be working the way you want it. I ran into two issues figuring it out.
The first one was that you are using the position: absolute on the images. it will place the image relative to the closest parent that is relatively positioned. Since in your example the parent div was a bootstrap class I decided to create a new div with position: relative assigned to it and gave it a class of images-wrapper.
Now I just needed to overlap the images over each other, just as you did in the example. But...If I make both images position: absolute the browser won't have an height assigned to the images-wrapper class. Therefore I decided to give one of the images a relative position and the other one absolute so it would overlap.
hope it helps :).
html
<body>
<section class="container pages-content">
<div class="row">
<div class="col-md-12 bottom">
<!--img src="https://d1mwzmktacfw26.cloudfront.net/wp-content/uploads/2016/04/23105511/Frontier-400x200.jpg" alt="" class="img-fluid"/-->
<!-- trying to use hover to change images-->
<div class="images-wrapper"><img src="https://d1mwzmktacfw26.cloudfront.net/wp-content/uploads/2016/04/23105511/Frontier-400x200.jpg" alt="" class="img-fluid a"/>
<img src="http://www.tikbok.com/rahalat/wp-content/uploads/2011/08/1-400x200.jpg" alt="" class="img-fluid b"/> <!---->
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-sm-12">
<div class="images-wrapper"><img src="https://d1mwzmktacfw26.cloudfront.net/wp-content/uploads/2016/04/23105511/Frontier-400x200.jpg" alt="" class="img-fluid a"/>
<img src="http://www.tikbok.com/rahalat/wp-content/uploads/2011/08/1-400x200.jpg" alt="" class="img-fluid b"/>
</div>
</div>
<div class="col-md-6 col-sm-12 bottom left">
<img src="http://cheb-room.ru/uploads/cheb/2016/11/w9RC4W-QqXw-200x200.jpg" alt="" class="img-fluid" />
</div>
</div>
<!-- Second block -->
<div class="row">
<div class="col-md-6 col-sm-12 right ">
<div class="row">
<div class="col-md-6 push-md-6 col-sm-12 bottom left">
<img src="http://www.animated-gifs.eu/category_cartoons/avatars-100x100-cartoons-spongebob/0038.gif" alt="" class="img-fluid"/>
</div>
<div class="col-md-6 pull-md-6 col-sm-12 bottom right">
<img src="http://www.animated-gifs.eu/category_cartoons/avatars-100x100-cartoons-spongebob/0038.gif" alt="" class="img-fluid"/>
</div>
<div class="col-md-12 bottom">
<img src="http://donsmaps.com/clickphotos/dolnivi200x100.jpg" alt="" class="img-fluid" />
</div>
<div class="col-md-12 bottom">
<img src="http://markcarson.com/images/SunBird-7-200x200.png" alt="" class="img-fluid" />
</div>
</div>
</div><!--./col-md-6-->
<div class="col-md-6 bottom col-sm-12 left project-image">
<img src="http://www.bravacasa.rs/wp-content/uploads/2014/03/Odlaganje-stvari-za-decu-slika-7-505x1025.jpg" width="200" class="img-fluid"/>
</div>
</div><!--./block 2-->
</body>
css
.pages-content {
max-width: 400px
}
.left {
padding-left: 5px;
}
.right {
padding-right: 5px;
}
.bottom {
padding-bottom: 10px;
}
img.a {
position: absolute;
z-index: 10;
opacity: 1;
transition: opacity 1s ease-in-out;
}
img.a:hover {
opacity: 0;
}
img.b {
z-index: 9;
opacity: 1;
position: relative;
}
.images-wrapper{
position: relative;
}

The best way to achieve this is to set the images as background and hover background, then set background-size:cover to keep the image display "uniform" in size. No need for Javascript code at all.
Here, I forked your Codepen for a demo. I only applied the hover effect to the first image for you to check out. Let me know if it helps.
For the "smooth transition", CSS also takes care of it for you. Feel free to change the div width (and height) to serve your needs better:
div.row div {
cursor: pointer;
transition: ease 0.5s all;
}
div.row .col-md-12:first-child {
background-image: url('https://d1mwzmktacfw26.cloudfront.net/wp-content/uploads/2016/04/23105511/Frontier-400x200.jpg');
background-size: cover;
height: 200px;
margin-bottom: 10px;
}
div.row .col-md-12:first-child:hover {
background-image: url('http://donsmaps.com/clickphotos/dolnivi200x100.jpg');
}

How to align 3 equal grids in mobile view properly - bootstrap

Am new to bootstrap. I created 3 equal grid columns. it looking fine in desktop view. but in tablet view alignemnt is not proper. pls check images below.
Desktop view
tablet, mobile view
Code i used:
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="feature-box serv-icon" onclick="window.open('serv-web-design.php','_newtab')">
<div class="feature-box-icon"><img class="img-responsive" src="images/services/Website.png" alt="Website" ></div>
<div class="feature-box-info">
<div class="mb-none">Website Development</div>
<p class="tall">Take your Business online with a responsive, attractive and professional websites.</p>
</div>
</div>
</div>
.feature-box{
position: relative;
top: -4px;
}
.feature-box .feature-box-icon {
border-radius: 35px;
color: #FFF;
display: inline-block;
float: left;
height: 90px;
line-height: 35px;
margin-right: 10px;
position: relative;
text-align: center;
width: 90px;
-webkit-transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
}
.feature-box .feature-box-info {
padding-left: 80px;
}
.feature-box {
background: transparent;
width: 100%;
height: 100%;
clear: both;
padding-bottom: 30px;
}
.feature-box.feature-box-style-2 .feature-box-icon i.fa,
.feature-box.feature-box-style-2 .feature-box-icon i.icons {
font-size: 28px;
}
.mb-none {
margin-bottom: 0 !important;
font-size: 22px;
color: #918d8d;
font-weight: 500;
}
h1.tall,
h2.tall,
h3.tall,
h4.tall,
h5.tall,
h6.tall,
p.tall {
margin-bottom: 33px;
line-height: 20px;
}

simple, make use of rows
<div class="row">
<div class="col-xs-4">
content
</div>
<div class="col-xs-4">
content
</div>
<div class="col-xs-4">
content
</div>
</div>
additionally always add .col-xs-* since it can cause issues in certain cases if you dont
Sidenote for further understanding of the bs grid system: if col-xs-6 col-md-4 is set, your element will behave like this: col-xs-6 col-sm-6 col-md-4 col-lg-4.

Try this https://jsfiddle.net/sej7Lfov/
HTML
<div class="container">
<div class="row">
<div class="col-sm-4">
<div class="feature-box serv-icon" onclick="window.open('serv-web-design.php','_newtab')">
<div class="feature-box-icon"><img class="img-responsive" src="http://placehold.it/350x150" alt="Website" ></div>
<div class="feature-box-info">
<div class="mb-none">Website Development</div>
<p class="tall">Take your Business online with a responsive, attractive and professional websites.</p>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="feature-box serv-icon" onclick="window.open('serv-web-design.php','_newtab')">
<div class="feature-box-icon"><img class="img-responsive" src="http://placehold.it/350x150" alt="Website" ></div>
<div class="feature-box-info">
<div class="mb-none">Website Development</div>
<p class="tall">Take your Business online with a responsive, attractive and professional websites.</p>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="feature-box serv-icon" onclick="window.open('serv-web-design.php','_newtab')">
<div class="feature-box-icon"><img class="img-responsive" src="http://placehold.it/350x150" alt="Website" ></div>
<div class="feature-box-info">
<div class="mb-none">Website Development</div>
<p class="tall">Take your Business online with a responsive, attractive and professional websites.</p>
</div>
</div>
</div>
</div><!-- End of row -->
<div class="row">
<div class="col-sm-4">
<div class="feature-box serv-icon" onclick="window.open('serv-web-design.php','_newtab')">
<div class="feature-box-icon"><img class="img-responsive" src="http://placehold.it/350x150" alt="Website" ></div>
<div class="feature-box-info">
<div class="mb-none">Website Development</div>
<p class="tall">Take your Business online with a responsive, attractive and professional websites.</p>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="feature-box serv-icon" onclick="window.open('serv-web-design.php','_newtab')">
<div class="feature-box-icon"><img class="img-responsive" src="http://placehold.it/350x150" alt="Website" ></div>
<div class="feature-box-info">
<div class="mb-none">Website Development</div>
<p class="tall">Take your Business online with a responsive, attractive and professional websites.</p>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="feature-box serv-icon" onclick="window.open('serv-web-design.php','_newtab')">
<div class="feature-box-icon"><img class="img-responsive" src="http://placehold.it/350x150" alt="Website" ></div>
<div class="feature-box-info">
<div class="mb-none">Website Development</div>
<p class="tall">Take your Business online with a responsive, attractive and professional websites.</p>
</div>
</div>
</div>
</div><!-- End of row -->
</div><!-- End of container -->
CSS
.feature-box-icon {
float: left;
display: inline;
width: 90px;
height: 90px;
}
.feature-box-info {
display: inline;
}
.feature-box {
clear:both;
margin: 20px 0;
}
#media(max-width: 997px) {
.feature-box-info {
font-size: 12px;
}
}

Reorder columns for mobile devices with Bootstrap

I have a web application which was created for desktops and now we are trying to utilize Twitter Bootstrap to make it responsive. We have few sidebar layouts where we want them to collapse in order different from their actual order. Right now when viewing on mobile phone left column is shown on top of content column. We want to show content on top for mobile device. I know about push-pull classes in twitter bootstrap but that doesn't seems to work unless I make changes to HTML. We can't change the HTML since there are other legacy themes which will break. Any help will be appreciated.
Updated: Here is the jsfiddle to reproduce the issue. As you can see it results in Blue sidebar on Green content column and I want the exact inverse of it where Green should be on top of Blue column.
<div id="outerPageContainer" class="container">
<div id="innerPageContainer">
<div id="header" class="row">
<div class="zone col-md-12 alert alert-warning">
Header
</div>
</div>
<div id="contentContainer" class="row">
<div id="leftColumn" class="col-md-3">
<div class="zone alert alert-info">
Sidebar
</div>
</div>
<div id="mainColumn" class="leftSidebarLayout col-md-9">
<div class="zone alert alert-success">
Content
</div>
</div>
</div>
<div id="footer" class="row">
<div class="zone col-md-12 alert alert-warning">
Footer
</div>
</div>
</div>
</div>
http://jsfiddle.net/4z7bq8ft/5/embedded/result/
Kind Regards

Bootstrap alredy brings responsive design, but only to 768px (Ipad width). You can use this bootstrap functionality with their column system:
.col-xs- to <768px .col-sm- to ≥768px .col-md- to ≥992px and .col-lg- to ≥1200px
there is more info in the web: http://getbootstrap.com/css/
If you want responsive design below 768 you will need to do it yourself by using:
#media (mix-width: 600px, max-width: 768px) for example.

Try the method bellow and order as needed.
.plate {
display: flex;
flex-direction: row;
}
.one, .two, .three, .four, .five {
width: 100px;
height: 100px;
display: inline-block;
text-align: center;
line-height: 100px;
font-weight: bold;
color: white;
font-size: 24px;
}
.one {
background-color: red;
order: 2;
}
.two {
background-color: green;
order: 3;
}
.three {
background-color: orange;
order: 1;
}
.four {
background-color: darkorange;
order: 5;
}
.five {
background-color: orange;
order: 4;
}
<div class="plate">
<div class="one">One</div>
<div class="two">Two</div>
<div class="three">Three</div>
<div class="four">Four</div>
<div class="five">Five</div>
</div>
See CSS Flexible Box Layout Module

Try this : http://jsfiddle.net/4z7bq8ft/9/
and html & css code is here
<form id="form1" runat="server">
<div id="outerPageContainer" class="container">
<div id="innerPageContainer">
<div id="header" class="row">
<div class="zone col-sm-12 alert alert-warning">
Header
</div>
</div>
<div id="contentContainer" class="row">
<div id="mainColumn" class="leftSidebarLayout col-sm-9">
<div class="zone alert alert-success">
Content
</div>
</div>
<div id="leftColumn" class="col-sm-3">
<div class="zone alert alert-info">
Sidebar
</div>
</div>
</div>
<div id="footer" class="row">
<div class="zone col-sm-12 alert alert-warning">
Footer
</div>
</div>
</div>
</div>
</form>
.col-sm-9 {
float: right !important;
width: 75%;
}
#media screen and (max-width:768px) {
.col-sm-9 {
width: 100%;
}
.col-sm-3 {
float: left;
width: 100%;
}
}