Tylersong55 Tylersong55 - 6 months ago 14
HTML Question

Push and Pull tags to organize different complex layouts

I am working on a webpage where I want to organize the different hierarchy levels on the page as the Bootstrap responsive media queries kick in.

Currently I am working with the items in a

container > row > col-x-y
setup. As you will see in the code provided, I have a mock up of the actual website.

The goal is to get the order of these items in different places as the page changes size. The way I set up this code will show the different screen size layouts. Here's a fiddle with the code below.

I have heard of a way to use Push and Pull in the
col
tags but I don't know if I quite understand how it works. So here are my questions:

1) Is this possible?

2) If so, can it properly do this layout?

<!DOCTYPE html>
<html>
<head>
<title>Test Page:</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<style>

.well {
border: 2px solid black;
}

</style>
<body>

<h2>Items with an * are the ones that move</h2>

<h3>Smallest screens</h3>
<div class="container">
<div class="row">

<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="well">
<b>Picture Carousel</b>
</div>
</div>

<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="well">
<b>*Get Help</b>
</div>
</div>

<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="well">
<b>*Current Status</b>
</div>
</div>

<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="well">
<b>Column item 1</b>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="well">
<b>Column item 2</b>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="well">
<b>Column item 3</b>
</div>
</div>

<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="well">
<b>Calendar Items Static Carousel</b>
</div>
</div>

<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="well">
<b>*Stay Connected</b>
</div>
</div>

</div>
</div>

<h3>Small screens</h3>
<div class="container">
<div class="row">

<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="well">
<b>Picture Carousel</b>
</div>
</div>

<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="well">
<b>*Get Help</b>
</div>
</div>

<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="well">
<b>*Current Status</b>
</div>
</div>

<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
<div class="well">
<b>Column item 1</b>
</div>
</div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
<div class="well">
<b>Column item 2</b>
</div>
</div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
<div class="well">
<b>Column item 3</b>
</div>
</div>

<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
<div class="well">
<b>Calendar Items Static Carousel</b>
</div>
</div>

<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
<div class="well">
<b>*Stay Connected</b>
</div>
</div>

</div>
</div>

<h3>Medium and Large Screens screens</h3>
<div class="container">
<div class="row">

<div class="col-xs-8 col-sm-8 col-md-8 col-lg-8">
<div class="well">
<b>Picture Carousel</b>
</div>
</div>

<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
<div class="well">
<b>*Current Status</b>
</div>
</div>

<div class="col-xs-8 col-sm-8 col-md-8 col-lg-8">
<div class="well">
<b>*Get Help</b>
</div>
</div>

<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
<div class="well">
<b>*Stay Connected</b>
</div>
</div>

<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
<div class="well">
<b>Column item 1</b>
</div>
</div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
<div class="well">
<b>Column item 2</b>
</div>
</div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
<div class="well">
<b>Column item 3</b>
</div>
</div>

<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="well">
<b>Calendar Items Static Carousel</b>
</div>
</div>

</div>
</div>

</body>
</html>


All help is greatly appreciated!

Answer

I've duplicated the last block. Please check the result:

https://jsfiddle.net/glebkema/2y08thn5/

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');

.well {
  border: 2px solid black;
}
.well-red {
  background: #fcc;
}
<h2>Items with an * are the ones that move
<br>The red block is duplicated</h2>

<h3>Screen is 
  <span class="visible-xs-inline">smallest</span>
  <span class="visible-sm-inline">small</span>
  <span class="visible-md-inline">medium</span>
  <span class="visible-lg-inline">large</span>
</h3>

<div class="container">
  <div class="row">

    <div class="col-xs-12 col-md-8">
      <div class="row">
        <div class="col-xs-12">
          <div class="well">
            <b>Picture Carousel</b>
          </div>
        </div>
        <div class="col-xs-12">
          <div class="well">
            <b>*Get Help</b>
          </div>
        </div>
      </div>
    </div>

    <div class="col-xs-12 col-md-4">
      <div class="row">
        <div class="col-xs-12">
          <div class="well">
            <b>*Current Status</b>
          </div>
        </div>
        <div class="col-md-12 hidden-xs hidden-sm">
          <div class="well well-red">
            <b>*Stay Connected</b>
          </div>
        </div>
      </div>
    </div>

    <div class="col-xs-12 col-sm-4">
      <div class="well">
        <b>Column item 1</b>
      </div>
    </div>
    <div class="col-xs-12 col-sm-4">
      <div class="well">
        <b>Column item 2</b>
      </div>
    </div>
    <div class="col-xs-12 col-sm-4">
      <div class="well">
        <b>Column item 3</b>
      </div>
    </div>

    <div class="col-xs-12 col-sm-6 col-md-12">
      <div class="well">
        <b>Calendar Items Static Carousel</b>
      </div>
    </div>
    <div class="col-xs-12 col-sm-6 visible-xs visible-sm">
      <div class="well well-red">
        <b>*Stay Connected</b>
      </div>
    </div>

  </div>
</div>