Menu
I have two rows with three columns in each. The first row contains images, the second row contains areas with text. In a desktop browser - where the three columns are aligned horizontally - each image is aligned on top of the corresponding text area. But on a mobile device, of course, all columns are stacked below each other. This makes all the images in row one get displayed below each other. And then the text areas follow in the same manner.
Is there a css-way to re-arrange my columns? I would like to stack the image and its corresponding text area together like this:
image1
textArea1
image2
textArea2
image3
textArea3
I have a jsfiddle set up.
<div class="row">
<div class="span4"> <div class="span4"> <div class="span4">
<div class="row">
<div class="span4"> <div class="span4"> <div class="span4">
No images but you get the general idea.
557
Use .order- classes for controlling the visual order of your content. These classes are responsive, so you can set the order by breakpoint (e.g., .order-1.order-md-2 ). Includes support for 1 through 12 across all five grid tiers.
We can easily change the order of built-in grid columns with push and pull column classes. The Push and Pull Classes: The push class will move columns to the right while the pull class will move columns to the left.
This is done by adding the class “col-SIZE-SIZE_TO_OCCUPPY”. For example, . col-md-4 which means take 4 columns on the medium-sized screens. If we stack multiple column classes on a single element we can define how we want the layout to look like on other screens and change the columns to rows as we want.
Since Bootstrap 4 is flexbox, it's easy to change the order of columns. The cols can be ordered from order-1 to order-12 , responsively such as order-md-12 order-2 (last on md , 2nd on xs ) relative to the parent . row . It's also possible to change column order using the flexbox direction utils...
I assume you are using bootstrap 3.0.
This is a very common layout situation. You have a couple of options.
You can use the inbuilt bootstrap column reordering with offset, if you place all of your columns in the same container and handle them accordingly on the various views. However this has to do mostly with rearranging the order that contents are displayed and not optimal for this particular case but have a look on how this work as it will come in handy in various scenarios in the future.
Bootstrap 3.0 offsets
But the most proper solution in your case and the one I use extensively in cases like this, is to put the image and text on the same columns like so:
<div class="row">
<div class="col-md-3">
<img class="img-responsive" src="..."/>
<p>...image text here...</p>
</div>
<div class="col-md-3">
<img class="img-responsive" src="..."/>
<p>...image text here...</p>
</div>
<div class="col-md-3">
<img class="img-responsive" src="..."/>
<p>...image text here...</p>
</div>
</div>
This way you have a column that displays correctly on all views.
Remember that bootstrap 3 is mobile first and developing should start ideally, from the smallest view to the largest. Always try to keep relevant dom elements together so that they have the desirable behavior on different sized layouts.
You just need to make sure that your image is equal or bigger than your larger column space width and that you use the img-responsive class on the image, for it to scale properly.
There are also other ways to achieve this but they defeat the purpose of using bootstrap for responsive layout and will more complicated for no good reason and similar result.
Try to keep markup as simple and elegant as possible in bootstrap for better maintenance, or things can easily get lost in a code soup of classes.
189
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
