Bootstrap layout - i don't want break into new line

Question

i want to make a bootstrap layout like the picture with this code: large screen layout

<div class="row">
<div class="col-lg-8 col-md-8 col-xs-12">
    <h3 class="panel-title">MAIN NEWS</h3>
</div>

<div class="col-lg-4 col-md-4 col-xs-12">
    <h3 class="panel-title">CONTACT</h3>
    <h3 class="panel-title">COMMENT</h3>
    <h3 class="panel-title">MOST VIEWS</h3>
</div>

<div class="col-lg-8 col-md-8 col-xs-12">
    <h3 class="panel-title">OTHER NEWS</h3>
</div>
</div>

it must keep the sort: MAIN NEWS->CONTACT->COMMENT-> MOST VIEWS->OTHER NEWS in Mobile Screen. And the layout like the picture in large screen. h3 is block i just remove it for clear view

But in Large screen it appears with distance of space between MAIN NEWS & OTHER NEWS block. i don't know how i make “OTHER NEWS” block be next in below of the “MAIN NEWS”? can some one help me on this?

Please add the code of main view as well. – Vaibhav Mule Apr 25 '15 at 09:37 — Vaibhav Mule, Apr 25 '15 at 09:37

score 1 · Answer 1 · answered Apr 25 '15 at 10:25

Try this code, I hope it help. Your code space because this code added space by height of this tag.

<div class="col-lg-4 col-md-4 col-xs-12">
    <h3 class="panel-title">CONTACT</h3>
    <h3 class="panel-title">COMMENT</h3>
    <h3 class="panel-title">MOST VIEWS</h3>
</div>

change your html seem like here,

<div class="row">
<div class="col-lg-8 col-md-8 col-xs-12">
    <h3 class="panel-title">MAIN NEWS</h3>
    <h3 class="panel-title">OTHER NEWS</h3>
</div>   
<div class="col-lg-4 col-md-4 col-xs-12">
    <h3 class="panel-title">CONTACT</h3>
    <h3 class="panel-title">COMMENT</h3>
    <h3 class="panel-title">MOST VIEWS</h3>
</div>
</div>

thank you but it does not keep the sort: MAIN NEWS->CONTACT->COMMENT-> MOST VIEWS->OTHER NEWS in Mobile Screen — Do Hoa Vinh, Apr 25 '15 at 10:34

otorrillas · Answer 2 · 2015-04-25T11:20:33.100

As Other news are in a new column, Bootstrap will try to add this element following the previous ones you had.

You should try to distribute the website into 2 clear columns and then use rows within the columns to separate different elements if necessary.

<div class="row">
   <!-- FIRST COLUMN -->
   <div class="col-lg-8 col-md-8 col-xs-12">
       <h3 class="panel-title">MAIN NEWS</h3>
       <h3 class="panel-title">OTHER NEWS</h3>
    </div>
    <!-- SECOND COLUMN -->
    <div class="col-lg-4 col-md-4 col-xs-12">
        <h3 class="panel-title">CONTACT</h3>
        <h3 class="panel-title">COMMENT</h3>
        <h3 class="panel-title">MOST VIEWS</h3>
    </div>

</div>

UPDATE

In order to view elements in different order depending on screen size/type of device, I would hide one div or another, depending on the device:

<div class="row">
   <!-- FIRST COLUMN -->
   <div class="col-lg-8 col-md-8 col-xs-12">
       <h3 class="panel-title">MAIN NEWS</h3>
       <!-- HIDDEN ON MOBILES -->
       <h3 class="panel-title hidden-xs hidden-sm">OTHER NEWS</h3>
    </div>
    <!-- SECOND COLUMN -->
    <div class="col-lg-4 col-md-4 col-xs-12">
        <h3 class="panel-title">CONTACT</h3>
        <h3 class="panel-title">COMMENT</h3>
        <h3 class="panel-title">MOST VIEWS</h3>
    </div>
    <!-- HIDDEN ON DESKTOP&TABLETS -->
    <div class="col-lg-8 col-md-8 col-xs-12 hidden-lg hidden-md">
       <h3 class="panel-title hidden-xs">OTHER NEWS</h3>
    </div>

</div>

it will not display following order: MAIN NEWS->CONTACT->COMMENT-> MOST VIEWS->OTHER NEWS in Mobile Screen. — Do Hoa Vinh, Apr 25 '15 at 10:30
yes, it works but it is not what i want because The "OTHER NEWS" block contains big data. the hidden causes losing my bandwidth. I also don't want to use Jquery to solve this kind of problem. — Do Hoa Vinh, Apr 25 '15 at 11:28

Bootstrap layout - i don't want break into new line

2 Answers2

UPDATE