Flexible layout. How to show conditional content without CSS? - html

Question

I'm building the tablet version of a site through css max-width media queries. Adapting styles have been easy so far.
But I found for one part of the site I need to show divs with 2 images instead of 3 and I can't find a way to do that with css.
Example:
Site version
<div>
<div>Image1</div>
<div>Image2</div>
<div>Image3</div>
</div>
Tablet version (if max-width is whatever, show only two divs)
<div>
<div>Image1</div>
<div>Image2</div>
</div>
Any ideas?
Thanks!
EDIT
Ok, I'll try to be more specific since every answer has been related to display:none and though that's a great solution, it wouldn't work for what I'm trying to do.
The divs are part of a slideshow. In the full site version the slider shows groups of three images. So in the tablet version, the third image would now be part of the second group (but not disappear):
<div>
<div>Image1</div>
<div>Image2</div>
</div>
<div>
<div>Image3</div>
<div>Image4</div>
</div>
And so on...
I'm not sure if this can be done through css or if the problem needs to be addressed with some kind of in-html script. That's why I asked for a solution without css.

Answer 1

Something like this would be good... The .hideme class of course can be placed inside a specific media query, and obviously can be renamed.
CSS
.hideme { display: none; }
HTML
<div>
<div>Image1</div>
<div>Image2</div>
<div class="hideme">Image3</div>
</div>

Answer 2

Assuming there will only ever be 3 divs there and you always want to hide the 3rd one, you could do it like this:
div:nth-child(3) {
display:none;
}
JSFiddle

Answer 3

The best way is to specify in the media-query the div that you want to "hide".
Something like:
<div>
<div>Image1</div>
<div>Image2</div>
<div class="ThingTohide">Image3</div>
</div>
#media only screen and (min-width:300px) and (max-width:480px) {
.ThingTohide {
display: none;
}
}

Answer 4

try this with jquery
<div>
<div>Image1</div>
<div>Image2</div>
<div class="move">Image3</div>
</div>
<div class="group2">
<div>Image4</div>
</div>
jquery code
$(document).ready(function(){
if ($(window).width()<640) { //to check if it's on mobile device, or any other method if it's not suits you
$('.move').prependTo('.group2');
};
});

Answer 5

This may sound stupid of me, but why does your title say "without CSS" when you're searching for a solution in CSS?
Aside of that, does your tablet version actually have only 2 divs coming from the backend, or is it the way it is supposed to be rendered?
In the second case you can just use display: none on the third div.
div > div:nth-child(3) {
display: none;
}
<div>
<div>Image1</div>
<div>Image2</div>
<div>Image3</div>
</div>