Float left on bootstrap smaller displays - html

Question

I have been trying to get an image to float left of some paragraph text, then when the resolution reaches below 500px, the image becomes responsive and fills the top (width 100%) and the text is fully below.
The code I have does this:
It works on higher resolutions, but with smaller displays, the text in the blue oval gets very small.
I am using Bootstrap.
How do I achieve the effect I am after?
Thanks
#arttopcont:before {
content: ' ';
display: table;
min-width: 767px;
}
#artimg{
float: left;
width: 300px;
padding-right: 20px;
}
<div id="arttopcont">
<div id="artimg">
<img src="image1.png" />
</div>
text here
text here
text here
text here
text here
text here
text here
text here
text here
</div>

Answer 1

If you're using Bootstrap you can use the various sizing column classes to make sections bigger/smaller at different screen sizes col-{xs, sm, md, lg}-#.
<div class="container">
<div class="row">
<div class="col-md-8 col-sm-6 col-xs-12">
<div id="artimg">
<img src="image1.png" />
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
text
</div>
</div>
</div>
Update (without Bootstrap classes):
If I understand correctly, you are looking to have the image be full width with text underneath it at screen sizes less than 500px. You can achieve this using media queries.
#media (max-width: 500px) {
#artimg {
width: 100%;
display: block;
float: none;
}
}
Hopefully that helps!