CODEWITHSUNDEEP
twitter-bootstraptwitter-bootstrap-3
balaji
balaji

Reputation: 27

How i can change the columns in bootstrap

For example if my columns view is for large screen

------1-(col-lg-4)---------|--------2-(col-lg-4)-------|----3-(col-lg-4)--------

I need to change the view of the column in bootstrap as per my order. How i can change using the col function?

---------1(col-md-6)-----------|----------3(col-md-6)----------

--------------------2(col-md-12)--------------------

Upvotes: 1

Views: 121

Answers (2)

Lance
Lance

Reputation: 861

First, a warning: Bootstrap isn't the most robust for moving content around responsively. If you can drop old browser support, you will have more reliable support from Flexbox.

I believe this is what you are looking for:

<div class="row">
   <div class="col-lg-4 col-sm-6"> <span>col 1</span> </div>
   <div class="col-lg-4 col-lg-push-4 col-sm-6"> <span>col 3</span> </div>
   <div class="col-lg-4 col-lg-pull-4 col-sm-12"> <span>col 2</span> </div>
</div>

As you can see, the code is in a different order in the doc but it results in the order you mapped above:

https://jsfiddle.net/4jmzm9wm/

Upvotes: 0

Priya
Priya

Reputation: 1355

You can use col-sm-12 and col-xs-12 for your small view in HTML. Like-

<div class="col-lg-4 col-md-6 col-sm-12 xol-xs-12">
<div>

If you do not specify any class for sm and xs. Bydefault, it will take 100% width i.e col-sm-12 itself.

If you want to divide the thing at one row for large screen for logo, search box, notification icons-

Try this-

<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4" style="float:left">Logo </div>
<div class="col-lg-4 col-md-4 col-sm-12">Search box</div>
<div class="col-lg-4 col-md-4 col-sm-4" style="float:right">Notification icons</div>
<div>

Hope this will help you.

Upvotes: 2

Related Questions