Block Div Display on Mobile - html

Question

I want to display my "third_div" as a block in mobile and inline on a desktop but my media query isn't working . I have attached two pictures that show what I want to achieve .how can I fix it ?.
picture one
picture two
<h2 style="text-align: center;font-size: 25px;font-family: Arial, Helvetica, sans-serif;line-height: 1.3;
margin-bottom: 18px;
font-weight: 400;"><strong>Premium Transportation Servicing The Dominican Republic</strong></h2>
<p style="text-align: center;">Transekur is the only company in the Dominican Republic dedicated exclusively to providing premium transportation and airport transfers in private, luxurious vehicles. No matter how big or small your vacation party, we have the transportation to fit your needs.</p>
<div style="width: 100%; background-color: white; border: 1px solid grey; height:100%;">
<div id="first_div" style="width: 100%; background-color: #ca7a09;">
<h2 style="text-align: center; color: white; padding-top: 5%;font-size: 36px;">The benefits of using Transekur</h2>
<div style="display: flex; display: -webkit-flex; overflow: auto;">
<div class="first_image" style="width: 25%;"><img style="display: block; margin-left: auto; margin-right: auto; padding-top: 12%;" src="http://transekur.seobrandserver.com/wp-content/uploads/2016/10/wifi.png" />
<h3 style="text-align: center; color: white;padding-top: 3%;padding-left:2%;">FREE Wi-Fi service</h3>
<p style="text-align: center; color: white;padding-top: 15%;padding-left:2%;">All of our modern luxury vehicles come equipped with mobile hotspot Wi-Fi service, so that you always have internet on the go.
</p>
</div>
<div class="second_image" style="width: 25%;"><img style="display: block; margin-left: auto; margin-right: auto;" src="http://transekur.seobrandserver.com/wp-content/uploads/2016/10/phone-1.png" />
<h3 style="text-align: center; color: white; padding-top: 16%;">FREE Phone Service</h3>
<p style="text-align: center; color: white;padding-left:2%;padding-top: 1%;">A mobile phone with unlimited calls within the Dominican Republic, the United States, Puerto Rico and Canada is provided free of charge for our clients during the rental period</p>
</div>
<div class="thirdt_image" style="width: 25%;"><img style="display: block; margin-left: auto; margin-right: auto;padding-top: 15%;" src="http://transekur.seobrandserver.com/wp-content/uploads/2016/10/car-1.png" />
<h3 style="text-align: center; color: white; padding-top: 1%;">New Vehicles</h3>
<p style="text-align: center; color: white; padding-top: 15%;padding-left:2%;"> Transekur Premium Transport’s fleet of modern luxury SUV’s and limo buses come with leather interior, tinted windows, WiFi service, and cold beverages. These come standard in all of our vehicles.</p>
</div>
<div class="fourth_image" style="width: 25%;">
<img style="display: block; margin-left: auto; margin-right: auto; padding-top: 5%;" src="http://transekur.seobrandserver.com/wp-content/uploads/2016/10/driver.png" />
<h3 style="text-align: center; color: white; padding-top: 11%;">Bilingual Drivers</h3>
<p style="text-align: center; color: white; padding-top: 13%;padding-right:5%">We are excellent communicators. If English is not your primary language, our drivers also speak French, German, Italian, Portuguese, and Spanish.</p>
</div>
</div>
<!-- End of the first iner div flex div -->
</div>
<!-- End of the first div -->
<div id="second_div" style="width: 100%; background-color: white; display: flex; display: -webkit-flex;height:100%;">
<div style="width: 50%;">
<p style="text-align: center;">Visited October 2016</p>
<img style="display: block; margin-left: auto; margin-right: auto; border-radius: 50%;" src="http://transekur.seobrandserver.com/wp-content/uploads/2016/10/avatar030-1.jpg" />
<h2 style="text-align: center; color: gray;">Yezabel D</h2>
</div>
<div style="width: 50%;">
"The best service there is, at a price you can’t resist."
<p style="margin-left: auto; margin-right: auto; padding-right: 10%;">I want to let you know how much my husband and I enjoyed our trips with Transekur. We used your service for trips to the Punta Cana airport. Very nice. Both of your drivers were on time and very courteous. We had used other services when we traveled to the Dominican before, needless to say yours is superior. Thank you for a trouble free ride to and from the airport, we will highly recommend your service to family and friends!</p>
</div>
</div>
<!-- End of the second first div -->
<div id="third_div" style="width: 100%; background-color: #363636;display:inline-block">
<style>#media only screen
and (min-device-width: 320px) {
#third_div{
display:block;
}
}</style>
<img src="http://transekur.seobrandserver.com/wp-content/uploads/2016/03/logo_transekur.png"/>
<h2 style="color:white;padding-left:50%;padding-top:2%;">Book Transport With Us Today!<h2>
<p>1-888-885-8708</p>
<p><img src="http://transekur.seobrandserver.com/wp-content/uploads/2016/10/testgif.gif" style="width: 48px;
height:24px;" /></p>
</div>
</div>

Answer 1

For media queries I would suggest taking a mobile-first approach. So set display:block; as the default styling and then only change it to display:inline-block; once the window is equal to or greater than 320px(added some spans to show that it's working):
#third_div {
display:block;
width:100%;
background-color:#363636;
color:white;
}
.mobile {
display:block;
}
.desktop {
display:none;
}
#media only screen and (min-width:320px) {
#third_div {
display:inline-block;
color:red;
}
.mobile {
display:none;
}
.desktop {
display:block;
}
}
<div id="third_div"><span class="desktop">DESKTOP</div><span class="mobile">MOBILE</div></div>
Not sure if you are making an e-blast or what, but I would advise against using inline styling as well. Using external CSS is a lot cleaner and easy to manage.

Answer 2

Use following code:
For desktop:
#third_div {
display: inline-block;
}
For mobile:
#media only screen and (min-width:320px) and (max-width:767px) {
#third_div {
display: block;
}
}
Or, Alternative solution
For mobile
#third_div {
display: block;
}
For desktop
#media only screen and (min-width: 1024px) {
#third_div {
display: inline-block;
}
}