Responsive CSS- Different Layout for Different Size - html

Question

So, I basically want to have 2 different layouts for a page on my website.
For under 400px:
[image]
description
[image]
description
For above 400px:
[image] description
[image] description
(so, the image and the text are on the same line)
I know I can do this very easily with Bootstrap if my breakpoint was one of the predefined ones, but it is not. So, what would the best approach be? Could I still use Bootstrap grid system and 'hack' it somehow or do something else altogether?
Thanks!

Answer 1

Here is a snippet
/*screen width over 400px*/
#media (min-width: 401px){
img {
width:50px;
height:50px;
}
p{
display:inline;
}
}
/*screen upto 400px*/
#media (max-width: 400px){
img {
width:100px;
height:100px;
}
}
<img src='https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSSHCRPXAtpOWvSaR4T5ecblzIT-RdIV19VjNB4uUPPnEq_UT5r'>
<p id='p1'>
description
</p>
<img src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQEaoUONNbTby87bfUNcRrdufGcaLSbDnC3SGSqKLk1ZwNFMEE3'>
<p id='p2'>
description
</p>

Answer 2

Alright your going to have to use media queries. Here are a few examples that I wrote.
A media query is a set of styles(styles that you set)that has a certain screen size condition.
When this screen size condition is met the styles given inside the media query override any other styles that contradict the styles outside the media query.
Here is an example
#media (max-width: 500px) {
#visible {
display: none;
}
}
<p id="visible">Not Hidden</p>
<p>Change screen sizes!</p>
Here is the basic syntax of media queries
First make the #media then add a screen size condition (max-width: 1000px) or (min-width: 500px) heres an example using max-width. Then, add the styles inside the media query.(Dont forget to close the media query!)
#media (max-width: 1000px) {
h1 {
display: none;
}
#hidden {
display: block;
}
}
p {
display: none;
}
<h1 id="heading">Heading</h1>
<p id="hidden">Hidden</p>
Now run the code snippet above and you will see that the heading will appear when the screen size is above 1000px and it disappears and a hidden phrase appears when the screen size is below 1000px.
Here is a tutorial on media queries Media Queries

Answer 3

What you're looking for are css media queries. Check this page for an in-depth explanation http://www.w3schools.com/cssref/css3_pr_mediaquery.asp.
Alternatively, in your case it looks like you simply want to wrap the descriptions on to the next line when the viewport becomes too narrow. If this is the case then there's no need to add in extra markup because you can just leverage the natural behavior of inline-block elements. This link will clarify the behavior of inline-block elements for you http://www.w3schools.com/css/css_inline-block.asp.

Answer 4

I would go this way, using a row structure.
It will give you some more options down the road, when/if you maybe want 3 img/text lined up, or ... and so on, sooner or later maybe a header, maybe a footer.
.header {
padding: 10px;
border-bottom: 1px solid #999;
}
.container {
padding: 10px;
white-space: nowrap;
}
.container .row {
margin-bottom: 10px;
}
.container .row span {
margin-left: 10px;
}
.container .row.at-top span {
vertical-align: top;
}
#media (max-width: 400px){
.container .row span {
display: block;
margin-left: 0;
margin-top: 10px;
}
}
<div class="header">
<div class="row">
Header
</div>
</div>
<div class="container">
<div class="row at-top">
<img src="http://lorempixel.com/200/100/sports" />
<span> Some text ... being aligned at top</span>
</div>
<div class="row">
<img src="http://lorempixel.com/200/100/city" />
<span> Some text ... or at bottom</span>
</div>
</div>