Display Different DIVs For Mobile Devices - css

Question

I have some onMouseOver functions that don't work particularly well on mobile devices. Would it be possible for me to have a different DIV displayed on mobile devices?
Here's a late response to your suggestions. Basically, I want a separate DIV (without the onMouseOver) if the display is mobile.
<!-- services -->
<section class="services" id="services">
<div class="container ptb">
<div class="row">
<h2 class="centered mb"><b>SERVICES</b></h2>
</div> <!-- Services Headline -->
<img src="assets/img/services-flip.png" height="50%" width="50%"
onMouseOver="this.src='assets/img/services-list.png'"
onMouseOut="this.src='assets/img/services-flip.png'" />
</div> <!-- Content, Image -->
</section>
<!-- end services -->

Answer 1

Media queries are your friend.
Example:
#media screen and (max-width: 768px) {
div.mobile { display: block; }
div.desktop { display: none; }
}

Answer 2

Aside from Media Queries, you can also use something like: http://detectmobilebrowsers.com/
Essentially you can include a script like this, and do something like this:
$(document).ready(function(){
if(jQuery.browser.mobile) {
$('body').addClass('mobile');
}
});
And based on the body class "mobile", hide / display the necessary divs. (this is the jQuery example, but you can do it using plain JS as well)

Answer 3

Sure you can .
Use css's CSS Media Queries
Here is a great reference for apple products screen sizes.
http://stephen.io/mediaqueries/#iPhone
div{
width: 100%;
height:100%;
padding: 0;
margin:0;
left:0;
left:0;
}
#desktopView{
background:rgb(50,50,80);
display:block;
}
#mobileView{
background:rgb(50,80,50);
display:none;
}
#mobileLandscapeView{
display:none;
background:rgb(80,50,50);
}
/* iPhone 6 in portrait & landscape */
#media only screen and (min-device-width : 375px) and (max-device-width : 667px){
/* where you can hide unwanted DIV and show a special MOBILE DIV if desired */
#desktopView{
background:rgb(50,50,80);
display:none;
}
#mobileView{
background:rgb(50,80,50);
display:block;
}
#mobileLandscapeView{
background:rgb(80,50,50);
display:none;
}
}
/* iPhone 6 in landscape */
#media only screen and (min-device-width : 375px) and (max-device-width : 667px) and (orientation : landscape) {
/* where you can hide unwanted DIV and show a special MOBILE DIV if desired */
#desktopView{
display:none;
}
#mobileView{
display:none;
}
#mobileLandscapeView{
display:block;
}
}
<div id="desktopView">Should see in desktop mode</div>
<div id="mobileView">Should see in iPhone 6 vertical mode</div>
<div id="mobileLandscapeView">Should see in iPhone 6 landscape mode</div>