How to split a column in responsive form using Bootstrap?

Question

I am using Bootstrap v4 alpha4

I currently have:

.row .col-xs-12.col-md-8 div A .col-xs-12.col-md-4 div B div C 

For the xs layout, I would like the div order to be:

 Div B Div A Div C 

I have no idea how to do this or how to even ask about it. I am not a third-party developer, so I do not know what is called.

We can change the HTML to whatever we want. He should not remain as he is now.

Answer 1

Bootstrap has column ordering classes , but in this case you can just use responsive float classes .

 <div class="row"> <div class="col-md-4 pull-md-right"> b </div> <div class="col-md-8"> a </div> <div class="col-md-4"> c </div> </div> 

http://www.codeply.com/go/XL5zJELyLD

Answer 2

Thus, using classes from bootstrap and some general style, you can achieve what I did in this handle.

http://codepen.io/TunderScripts/pen/PGadpr

Html:

 <div class="row"> <div class="col-xs-12 col-md-4 pull-right col1"></div> <div class="col-xs-12 col-md-8 pull-left col2"></div> <div class="col-xs-12 col-md-4 pull-right col3"></div> </div> 

css:

 .col1{ background: red; height: 200px; } .col2{ background: blue; height: 600px; } .col3{ background: green; height: 200px; } 

You can change the default behavior using your classes for float (pull-left, pull-right).

Answer 3

Instead of flexbox, I used a combination of float and position css properties to get the expected result. Assuming a large width as 150px and a small width as 100px .

Working script

 .container { width: 250px; position: relative; } .blue { width: 150px; height: 300px; background: blue; position: absolute; } .pink { width: 100px; height: 100px; background: pink; float: right; } .green { width: 100px; height: 100px; background: green; clear: right; float: right; } @media (max-width: 450px) { .blue { position: relative; } .green, .pink { float: none; width: 150px; } } 

 <div class="container"> <div class="pink"></div> <div class="blue"></div> <div class="green"></div> </div> 

Answer 4

As promised, a simple project

HTML

 <div class="row"> <div class="col1">DIV A</div> <div class="col2">DIV B</div> <div class="col3">DIV C</div> </div> 

CSS

  .row { display: flex; flex-wrap: wrap; flex-direction: row; justify-content: space-between; width: 400px; margin: 0 auto; } .col1 { width: 200px; height: 400px; background-color: #86a0ff; } .col2 { width: 150px; height: 150px; background-color: #ff6cde; } .col3 { margin-top: -200px; margin-left: auto; width: 150px; height: 150px; background-color: #35af6d; } @media (max-width: 768px) { .row { justify-content: center; flex-direction: column; } .col1 { order: 2; width: 200px; margin-top: 50px; } .col2 { order: 1; width: 200px; } .col3 { order: 3; width: 200px; margin-top: 50px; margin-left: 0; } } 

As for the explanation, here is a great guide to flexbox. The main idea in my example is that using the order property you can control the display order of the blocks. The main advantage of using flexbox is that you do not need to load any library (for example, Bootstrap) to achieve the desired result, for example, response. And it also has good browser support if you don't need support for older browsers. I hope my answer will be useful to you!