Reposition row for small screens - css

Question

I'm using bootstrap to distribute my header elements in two columns.
So there is a row, with 2 col-md-6 to separate elements to the left and to the right. This is ok.
But when resizing to Smartphones, I'd like to show items in this order (top to bottom):
1) text (I'd like to show it on top but reduce font-size)
2) Buttons (1 on top of the other)
3) Image (Smaller Image doesn't matter).
How to do that using Bootstrap?
CodePen:
https://codepen.io/ogonzales/pen/ebKNoK
HTML
<header class="header" id="header1">
<div class="row">
<div class="col-md-6">
<div class="circle">
<br>
<div class="caption">
<h2 class="title display-3">Stickers <strong>Personalizados</strong></h2>
<p>Lorem m nisi! Eum vitae ipsam veniam, ullam explicabo quaerat asperiores veritatis nam
reprehenderit necessitatibus sequi.</p>
</div>
<div class="row">
<div class="col-md-5">
Comprar
</div>
<div class="col-md-5 my-home-banner-image">
<a href="{% url 'shop:SamplePackPage' %}" class="btn btn-naranja text-white btn-block">Muestras
</a>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<br>
<img class="" src="https://www.austinhomebrew.com/assets/images/sticke-alt-8989.png" width="440px" height="300px">
</div>
</div>
</header>
Reference:
UPDATE 1:
I'm getting this results from AnnieP's answer. But:
How to give spacing between sections and specially between buttons?

Answer 1

What you have should work, as far as the Bootstrap goes. col-md-6 is saying "I want this column to be 6-wide on screens greater than 767 px" and because you don't specify anything for col-xs and col-sm, by default every div with a .col- will be col-12, or full-width, on screens 767 and smaller. It looks like you don't have bootstrap hooked up to the Codepen, so it won't act responsively there, but it should when Bootstrap is working. It looks like you have a lot of CSS in there that's trying to handle what Bootstrap's columns would do for you. For instance the following CSS that you have should all be handled with <div class="col-md-6">:
/*=== Large devices (desktops, 992px and up) ===*/
#media (min-width: 992px) {
.header .center {
width: 50%;
}
What you need to do is change the CSS using media queries for the text size change and the image sizing/positioning. Your image is set with absolute positioning, which is why it's on top of the buttons when it responsively adjusts to a smaller screen. Instead, utilize Bootstrap's grid system and give it col-md-6 as well. Here's the general outline of all you should need:
<div class="container">
<div class="row">
<div class="col-md-6">
<h2>Stickers Personalizados</h2>
<p>Lorum impsum</p>
<div class="row">
<div class="col-md-6">
Comprar
</div>
<div class="col-md-6">
Muestras
</div>
</div>
</div>
<div class="col-md-6">
<img class="" src="https://raw.githubusercontent.com/alphadsy/alpha-ui/master/images/man.png" width="440px" height="300px">
</div>
</div>
</div>
Revisit the Bootstrap getting started docs if you need help setting it up, and you likely don't need most of the CSS in your Codepen.
Update:
To achieve spacing below sections, you can add a wrapper div with class="row", but that won't work for the buttons because they start on the same row. In that case, you'll want to add margin-bottom in the css. For example:
.btn {
margin-bottom: 10px;
}