CODEWITHSUNDEEP
htmlcss
codeNinja
codeNinja

Reputation: 1462

show content block on right above the content on right when displaying on mobile

I am using CKEditor plugin to create the following bootstrap widget. I dont have the css for it since thats coming from the plugin. Here is what it looks like.

Image of what it looks like on desktop

On a desktop/large monitor this is exactly how i want it to look. On a mobile screen the Content block display above the Image (as most would expect). But i want to flip the behavior. On a mobile device i want the image to appear above the text. What changes should i make to the below HTML to do that?

Here is the HTML.

<div class="row two-col-left">
    <div class="col-md-9 col-main">
        <p><span style="font-size:24px">Some Text Goes here</span><br />
    </div>

    <div class="col-md-3 col-sidebar">
        <p><img src="../ckfinder/userfiles/images/Jackie.jpg" style="display:block; height:220px; margin:auto; text-align:center; width:220px" /></p>
    </div>
</div>

Upvotes: 1

Views: 41

Answers (1)

partypete25
partypete25

Reputation: 4413

In your html change the order so that the .col-sidebar div is first, that'll fix your mobile issue.

In your css add a media query to change the float property on the sidebar to the right. Here I've made the change at 768px, but you can adjust this to suit your breakpoint value for when you want the change to happen.

@media(min-width:768px){
  .col-sidebar {float:right;}
}

Upvotes: 2

Related Questions