Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Push/pull columns for Only smaller screen sizes in Bootstrap 3

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #175364
    harnishdesign
    Participant

    I have the following layout on a page(with Bootstrap 3.2.0):

    <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">1</div>
    <div class="col-lg-5 col-md-5 col-sm-6 col-sm-push-6 col-xs-12">2</div>
    <div class="col-lg-3 col-md-3 col-sm-6 col-sm-pull-6 col-xs-12">3</div>
    

    SO, it is working perfect in small screen(according to below).

     -----------------------
    |           1           |
     ------------------------
    |     3     |     2     |
     ------- ------- -------
    

    But, Here, I have use col-sm-pull-* and col-sm-push-* for only small screen. though, Push/pull columns is call in Medium screen and Large screen.

    if, I will use col-sm-push/pull-* & col-xs-push/pull-* So, why it is call(run) in large & medium screen?

    Medium screen and Large screen:

    I want to this                 I get this
     -------- ---------- ------        -------- ------ ---------
    |   1   |    2    |  3  |         |   1   |  3  |    2    |
     -------- ---------- ------        -------- ------ ---------
    

    So, How to set Push/pull columns only smaller screen?

    What is wrong Here?
    How can i fix it?

    Would appreciate the help.

    #179179
    tesseractdigital
    Participant

    I think this is what you’re looking for:

    <div class="col-md-4">1</div>
    <div class="col-sm-6 col-sm-push-6 col-md-5 col-md-push-0 ">2</div>
     <div class="col-sm-6 col-sm-pull-6 col-md-3 col-md-pull-0">3</div>

    Using push-0 and pull-0 resets your ordering.

Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.