Laravel + Bootstrap - Keep Sidebar Side by Side with content

Question

I'm using Laravel + bootstrap with the columns/rows .

However when i use a smaller screen . The sidebar is placed on top and the content below .

I want both of them to remain in their positions and become smaller instead .

This is how i want it to look both on desktop & phone/tablets

This is how it appears on the phone however :

Is there any way to fix them side by side and yet keep them responsive like laravel & bootstraps intends.

This is the basic layout.

<div id="container-fluid">

                <div class="container">

                    <div class="col-sm-12">

                        <div class="col-sm-3">

                            @yield('sidebar')

                        </div>

                        <div class="col-sm-9">

                            @yield('content')

                        </div>

                    </div>

                </div>

            </div>

Answer 1

You have to change the columns from sm (Small Devices, eg. tablets) to xs (Extra Small Devices, eg. phones).

<div id="container-fluid">
    <div class="container">
        <div class="row">
            <div class="col-xs-3">
                @yield('sidebar')
            </div>
            <div class="col-xs-9">
                @yield('content')
            </div>
        </div>
    </div>
</div>

From http://getbootstrap.com/css/#grid :

Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. Therefore, eg applying any .col-md-* class to an element will not only affect its styling on medium devices but also on large devices if a .col-lg-* class is not present.

Answer 2

I think, you can also play in this way. Please note that, I just add temporary inline CSS. I don't recommend to add inline CSS.

<div class="container">
    <div class="col-md-12 col-sm-12 col-xs-12">
        <div class="row">
            <div class="col-md-3 col-sm-3 col-xs-3">
                <div style="background-color:#9E2121; height:200px;">@yield('content')</div>
            </div>
            <div class="col-md-9 col-sm-9 col-xs-9">
                 <div style="background-color:#55A03D; height:600px;">@yield('content')</div>
            </div>
        </div>
    </div>
</div> 

You can see that result like that;