Responsive CSS column - html

Question

I am trying to create a two-columns layout. Main content column contains the blog card and the second column which I'm trying to place at the top right corner contains.
This is the blog card.
The Bootstrap layout I'm using:
<main role="main" class="container">
<div class="row">
<div class="col-md-8">
<div class="blog-card">
<div class="meta">
<div class="photo" style="background-image: url({{ post.featured_image }})"></div>
<ul class="details">
<li class="author">John Doe</li>
<li class="date">Aug. 24, 2015</li>
<li class="tags">
<ul>
<li>Learn</li>
<li>Code</li>
<li>HTML</li>
<li>CSS</li>
</ul>
</li>
</ul>
</div>
<div class="description">
<h1>{{post.title}}</h1>
<h2>Opening a door to the future</h2>
<p>{{post.summary}}</p>
<p class="read-more">
Read More
</p>
</div>
</div>
</div>
{% endfor %}
<div class="col-md-4">
<div class="content-section">
<h3>Our Sidebar</h3>
<p class='text-muted'>
You can put any information here you'd like.
<ul class="list-group">
<li class="list-group-item list-group-item-light">Latest Posts</li>
<li class="list-group-item list-group-item-light">Announcements</li>
<li class="list-group-item list-group-item-light">Calendars</li>
<li class="list-group-item list-group-item-light">etc</li>
</ul>
</p>
</div>
</div>
</div>
</main>
The col-md-4 content doesn't stick to the right on desktop view, it just appears at the bottom of the card. I've tried several methods but it doesn't work. I'm actually calling an API and using the blog card to display posts from the CMS I am using. Instead of the sidebar to remain at the top right with the first post it sticks to the last post.

Answer 1

You use container class in main tag. This class has max-width and padding from left and right. If you want use 100% of the page use container-fluid class.
<main role="main" class="container-fluid">
<div class="row">
<div class="col-md-8" style="border:solid 1px red">
{% blog %}{% card html }
</div>
<div class="col-md-4" style="border:solid 1px red">
<div class="content-section">
<h3>Our Sidebar</h3>
<p class='text-muted'>
You can put any information here you'd like.
<ul class="list-group">
<li class="list-group-item list-group-item-light">Latest Posts</li>
<li class="list-group-item list-group-item-light">Announcements</li>
<li class="list-group-item list-group-item-light">Calendars</li>
<li class="list-group-item list-group-item-light">etc</li>
</ul>
</p>
</div>
</div>
</div>
</main>`

Answer 2

I eventually got it to work: I made the sidebar show only on certain screen sizes. Although, my blog card gets scattered, I am okay with the outcome.
Instead of using columns, media queries did the trick:
#media only screen and (min-width: 1020px) and (max-width: 3000px)