-3

I have 4 divs, div 2 is very lengthy, div 1,3,4 are of equal sizes, I want them to display in a compact form, but it displays full contents of div2 then only displaying div3 ,it displays div 3 as a new row after all the contents of first row

    <div class ="row"> 
      <div class="col-xs-12"> //content 1 </div> 
      <div class="col-xs-12"> //content 2 </div> 
    </div> 
    <div class ="row"> 
      <div class="col-xs-12"> //content 3 </div> 
   </div> 
   <div class ="row"> 
     <div class="col-xs-12"> //content 4 </div> 
   </div>

please help me

RahulB
  • 2,070
  • 1
  • 18
  • 26
Serene Abraham Mathew
  • 358
  • 4
  • 16
  • `it displays div 3 as a new row after all the contents of first row` as it can be seen in your code, you are creating a new row after second div. Thats why the 3rd div is placed in a new row. – Aakash Thakur Feb 09 '17 at 08:59
  • i want to display it as in a column div1 div 3 div 4 and in next column div2 – Serene Abraham Mathew Feb 09 '17 at 09:06
  • @SereneAbrahamMathew It is not clear from your comment what do you want. Create a image. and add it to your question. – neophyte Feb 09 '17 at 09:31

1 Answers1

0

Solved the problem myself

Used row inside col div

<div class="row">
 <div class="col-xs-6">
  <div class="row">
    <div class="col-xs-12"></div>
    <div class="col-xs-12"></div>
  </div>
 </div>
 <div class="col-xs-6">
  <div class="row">
    <div class="col-xs-12"></div>
  </div>
 </div>
</div>
Serene Abraham Mathew
  • 358
  • 4
  • 16