How to display divs in a different order depending on screen size in Bootstrap 3?

Question

I have a two-line Bootstrap layout that collapses to one on narrow screens.

The Art of Bad ASCII:

+-------------------+-------------------+ | Div A | Div B1 | | +-------------------+ | | Div B2 | | +-------------------+ | | Div B3 | +-------------------+-------------------+ 

turns onto

 +-------------------| | Div B1 | +-------------------+ | Div B2 | +-------------------+ | Div B3 | +-------------------+ | Div A | | | | | | | | | +-------------------+ 

A has class col-md-6 , B1-B3 is contained in div B with class col-md-6 col-md-push-6 . This works fine, but the layout will be even better than

 +-------------------| | Div B1 | +-------------------+ | Div A | | | | | | | | | +-------------------+ | Div B2 | +-------------------+ | Div B3 | +-------------------+ 

Is this achievable with a reasonable amount of code?

Answer 1

It makes sense when you design it, thinking about what it will look like on mobile devices in the first place. A simple right and right lesson, as well as right classes and architecture, and you don’t have any media hacks at all.

Disclaimer: be careful, as the only drawback is the loss of the sequence of tabs A1-B1-B2-B3;)

See code

 <div class="container"> <div class="col-xs-12 col-md-6 pull-right"> <div class="box">B1</div> </div> <div class="col-xs-12 col-md-6 pull-left"> <div class="box a1">A1</div> </div> <div class="col-xs-12 col-md-6"> <div class="box">B2</div> </div> <div class="col-xs-12 col-md-6"> <div class="box">B3</div> </div> </div> 

CSS (this is only for demo decorations and markup boxes. You will not need this, except for no-padding reset)

 .container div{ padding:0; } .box{ background:red; height:40px; color:#fff; padding:10px; text-align:center; border:1px solid #111; } .box.a1{ background:blue; height:120px; } 

Watch the demo

Answer 2

Use the media query to specify a new layout when it is reset. You can find all the necessary information on media queries here: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

Barebones example:

 @media (max-width: 700px) { collapsed layout here }