Twitter Bootstrap Question posted in

Column order in twitter bootstrap 3

my first question here so I apologize if I’m doing this wrong.

So I’ve got this piece of code:

<div class="row">
	<div class="col-md-8">
		col-md-8
	</div>
	<div class="col-md-4">
		col-md-4
	</div>
	<div class="col-md-8">
		col-md-8
	</div>	 		
</div>

which shows:

[8] [4]
[8]

My question is, how do I manipulate the column order to be like this:

[8] first
[8] second
[4]

when view-port < sm. With the code I have right now it currently shows:

[8] first
[4] 
[8] second
Tags:

2

Answers


  1. 0

    The reordering you would like to do is a tad bit tricky but bootstrap has developed a method to reorder columns depending on the view using push and pull classes. These sources should do trick and help you figure out the solution for your implementation.

    https://scotch.io/tutorials/reorder-css-columns-using-bootstrap

    https://css-tricks.com/forums/topic/pushpull-columns-for-only-smaller-screen-sizes-in-bootstrap-3/

    Hope this helps !

    Login or Signup to reply.
  2. 0

    You need to think “mobile first” and use nesting like this..

    <div class="row">
    <div class="col-md-8">
        <div class="row">
            <div class="col-md-12">8</div>
            <div class="col-md-12">8</div>
        </div>
    </div>
    <div class="col-md-4">
        4
    </div>
</div>

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

    Read more about Bootstrap column ordering

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search