Search code examples
htmlcssbootstrap-4responsive

Bootstrap div below each other and then beside each other in mobile view

My layout is relatively simple. There is a header at the top, nagivation bar with an image inside a column on the left and the content at the right. enter image description here

When I switch to a mobile responsive view, I want the navigation column to display the nagivation list and an image side by side instead of top and bottom like in the default view.

enter image description here

So far, I have used the following code

<div class="row">
    <div class="col-lg-2">
        <div class="row">
            <div class="col-sm-10">
                <ul style="margin-left: 50px;">
                    <li><a href="/news">News</a></li>
                    <li><a href="/events">Events</a></li>
                </ul>
            </div>
            <div class="col-sm10">
                <img src="/images/navbg.png" class="img-fluid">
            </div>
        </div>
    </div>
    <div class="col-lg-9">
        <h3>Blog Title</h3>
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
    </div>
</div>

With the above code, the layout looks fine in the Default view, but in the smaller responsive view, I am unable to get the image appear beside the unordered list. The unordered list and the image appear below each other just like in the default layout and eat up a lot of space. I also wanted to crop the image smaller from the top with css, although I don't mind using a smaller size image too.

Any help would be appreciated.

Solution

  • You should use the responsive col- classes inside the left column...

    https://www.codeply.com/go/s2HSMmbnkv

    <div class="row">
    <div class="col-sm-2 col-12">
        <div class="row">
            <div class="col-sm-10 col-9">
                <ul style="margin-left: 50px;">
                    <li><a href="/news">News</a></li>
                    <li><a href="/events">Events</a></li>
                </ul>
            </div>
            <div class="col-sm-10 col-3">
                <img src="//placehold.it/200" class="img-fluid">
            </div>
        </div>
    </div>
    <div class="col-sm-9">
        <h3>Blog Title</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
    </div>
</div>

    The left col-sm-2 become full width (col-12) on the smallest screens, and then the inner columns (col-9,col-3) become side-by-side. You may want to adjust the breakpoints (sm), and widths as desired.