title: rowspan and colspan in bootstrap
body: <p>Currently working on bootstrap where in the desktop I am getting exactly as below structure</p>
  
  <p><code>column1</code> <code>column2</code> <code>column3</code> <code>column4</code> <code>column5</code> </p>
  
  <p>but on the tablet view </p>
  
  <p>I need to get like below structure</p>
  
  <pre><code>column1  `column3`
  column2   column4` column5
  </code></pre>
  
  <p>Here is my html code</p>
  
  <pre><code>&lt;footer class="footer"&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-lg-2 col-md-3 col-sm-3 col-xs-2 footer-Darkerblue"&gt;
                  &lt;p class="footer-ul footer-text-align"&gt;
                      &lt;span class="footer-headtext text-uppercase"&gt;destination&lt;/span&gt;&lt;br/&gt;
                      &lt;span class="footer-Kilomet"&gt;6.8 Kms &lt;/span&gt;
                      &lt;span class="footer-min"&gt;25 Min away&lt;/span&gt;
                  &lt;/p&gt;
  
              &lt;/div&gt;
              &lt;div class="clearfix visible-sm visible-md"&gt;&lt;/div&gt;
              &lt;div class="col-lg-2 col-md-3 col-sm-3 col-xs-2 footer-Darkenblue"&gt;
                  &lt;ul class="footer-ul footerstatus-text-align"&gt;
                      &lt;li class="footer-headtext text-uppercase"&gt;
                          Status
                      &lt;/li&gt;
                      &lt;li class="footer-min-text"&gt;
                          In Transit
                      &lt;/li&gt;                       
                  &lt;/ul&gt;
              &lt;/div&gt;
              &lt;div class="clearfix visible-sm visible-md"&gt;&lt;/div&gt;
              &lt;div class="col-lg-4 col-md-6 col-sm-6 col-xs-4 col-md-push-6"&gt;
                  &lt;div class="dotted"&gt;
                      &lt;ul class="footer-ul footer-direction-text"&gt;
                          &lt;li&gt;
                              &lt;i class="fa fa-circle-o direction-icon-circle"&gt;&lt;/i&gt;
                                  &lt;div class="footer-map-text"&gt;Geo-Refer Enterprises Inc., Flat B, 39 Acacia Avenue,
                                  North End, Silhurst, Loamshire, SH15 6BP&lt;/div&gt;
                          &lt;/li&gt;
                          &lt;li class="footer-li-pad"&gt;
                              &lt;i class="fa fa-map-marker direction-icon"&gt;&lt;/i&gt;
                                  &lt;div class="footer-map-text"&gt;As Directed&lt;/div&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="clearfix visible-sm visible-md"&gt;&lt;/div&gt;
              &lt;div class="col-lg-2 col-xs-2 footer-left-border"&gt;
                  &lt;ul class="footer-ul"&gt;
                      &lt;li&gt;
                          DATE
                      &lt;/li&gt;
                  &lt;/ul&gt;
                  &lt;ul class="footer-ul list-inline footer-text-date"&gt;
                      &lt;li&gt;
                          &lt;em class="fa fa-calendar"&gt;&lt;/em&gt; 25 Dec, 2015
                      &lt;/li&gt;
                      &lt;li&gt;
                          &lt;em class="fa fa-clock-o"&gt;&lt;/em&gt; 16:30
                      &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
              &lt;div class="clearfix visible-sm visible-md"&gt;&lt;/div&gt;
              &lt;div class="col-lg-2  col-xs-2 footer-left-border"&gt;
                  &lt;ul class="footer-ul"&gt;
                      &lt;li&gt;
                          BOOKING REFERENCE
                      &lt;/li&gt;
                      &lt;li class="footer-li-pad"&gt;
                          92737260
                      &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/footer&gt;
  </code></pre>
  
  <p>With my code </p>
  
  <p>Actually with my above code i am getting desktop version </p>
  
  <p><a href="https://i.stack.imgur.com/vINOG.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vINOG.png" alt="enter image description here"></a></p>
  
  <p>But not for tablet</p>
  
  <p><a href="https://i.stack.imgur.com/JpNmq.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/JpNmq.png" alt="enter image description here"></a></p>
  
  <p>column 1 and column2 one below the other but column 3 is not starting near to column1 it was starting from column2</p>
  
  <p>Kindly please help me where I am doing wrong</p>
  
  <p>Thanks</p>