Bootstrap push pull question

[toolman]

Hi,

I have two columns which I want to swap the order of the <div> with FORM HERE with TITLE so the TITLE switches above the FORM when on tablet and mobile.

<section class="hotel-content detail-cn" id="hotel-content">
        <div class="row ">
                <div class="col-lg-3 detail-sidebar"> FORM HERE </div>
                <div class="col-lg-9 hl-customer-like form-intro">
                        <section class="head-detail">
                                <div class="head-dt-cn">
                                        <div class="row">
                                                <div class="col-xs-12"> TITLE </div>
                                        </div>
                                </div>
                        </section>
                </div>
        </div>
</section>

I’ve tried the following, but it didn’t seem to work:

<section class="hotel-content detail-cn" id="hotel-content">
        <div class="row ">
                <div class="col-lg-3 col-xs-push-12 detail-sidebar"> FORM HERE </div>
                <div class="col-lg-9 col-xs-pull-12  hl-customer-like form-intro">
                        <section class="head-detail">
                                <div class="head-dt-cn">
                                        <div class="row">
                                                <div class="col-xs-12"> TITLE </div>
                                        </div>
                                </div>
                        </section>
                </div>
        </div>
</section>

Any ideas what I have wrong?

Thanks!

[PaulOB]

@toolman

col-xs-push-12

Hi, you can’t switch the order of the divs once they are stacking vertically (unless you use flexbox).

If the elements are horizontal (floated) then you can switch their appearance as you can pull and push to one side or the other. However once you go to small screen then pushing or pilling sideways makes no sense (even if it worked) because the elements are vertical.

What you could do though is have the wide screen display pull and pushed but have the html in the correct place for the small screen to start with so that when vertical the html is already in the right place.

e.g.

  <section class="hotel-content detail-cn" id="hotel-content">
    <div class="row ">
      <div class="col-lg-9 col-lg-push-3 hl-customer-like form-intro">
        <section class="head-detail">
          <div class="head-dt-cn">
            <div class="row">
              <div class="col-xs-12"> TITLE </div>
            </div>
          </div>
        </section>
      </div>
      <div class="col-lg-3 col-lg-pull-9 detail-sidebar"> FORM HERE </div>
    </div>
  </section>

Flexbox can re-order elements more easily so if you can’t have html as shown above then you will need to use the flexbox approach for small screens.

[toolman]

Many thanks for your reply.

That worked, but I now have the following issue.

I want to display the “CONTENT” section under the “TITLE” on desktop, but under the “FORM” on mobile.

<section class="hotel-content detail-cn" id="hotel-content">
    <div class="row ">
      <div class="col-lg-9 col-lg-push-3 hl-customer-like form-intro">
        <section class="head-detail">
          <div class="head-dt-cn">
            <div class="row">
              <div class="col-xs-12"> TITLE </div>
          <div class="col-xs-12"> CONTENT UNDER FORM on MOBILE </div>
            </div>
          </div>
        </section>
      </div>
      <div class="col-lg-3 col-lg-pull-9 detail-sidebar" style="background:#000"> FORM HERE<br />FORM HERE<br />FORM HERE<br />FORM HERE<br />FORM HERE<br />FORM HERE<br />FORM HERE<br />FORM HERE<br />FORM HERE<br />FORM HERE<br />
      </div>
    </div>
  </section>    

Is this possible or would I need flexbox for this?

Thanks

[PaulOB]

@toolman

Is this possible or would I need flexbox for this?

It’s not possible with that structure even with flexbox. To re-order elements with flexbox the elements concerned need to be siblings and not a mixture of parent and children.

It could be done without using bootstrap but would need a completely different approach.

If all you are interested in is moving the title then a simple solution would be to duplicate the title html in the form div (above ‘Form here’ text) and then use bootstrap’s visible and hidden classes (whatever they are called now) to show and hide depending on desktop or mobile etc. It’s a bit of duplication but for a simple title it may be the easier solution rather than rewriting that whole section outside of bootstrap.

[toolman]

Hi,

I’ve tried another approach which has the title in a seperate block.

I now have this:

<div class="col-xs-12 col-lg-9 col-lg-push-3">form</div>
<div class="col-xs-12 col-lg-3 col-lg-pull-9">left column</div>
<div class="col-xs-12 col-lg-9 col-lg-offset-3">text here</div>

The trouble I am having is that the

with the “text here” in is appearing under the end height of the “left column”. Is there a way to have it appear directly under the “form” div?

Thanks for your help!

[PaulOB]

Does this do what you want?

<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of Bootstrap 3 Grid System</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style type="text/css">

.lcol{float:left;}
.form1{float:right}
.text-content{float:none;margin-left:25%;}
@media screen and (max-width:1199px){
	.text-content{margin:0;clear:both}
}

</style>
</head>
<body>

<div class="container">
<div class="col-xs-12 col-lg-9 form1">form</div>
<div class="col-xs-12 col-lg-3 lcol">left column</div>
<div class="col-xs-12 col-lg-9 text-content">text here</div>
</div>

</body>
</html>

[toolman]

Awesome! Many thanks, it worked!