I have a section with three columns in it. Everything looks and works fine. I wrote a media query for the related section. The first column has an image, the second column has the text related to the image and the third column has the townhouse address. What I actually want is as they are wrapped in columns when I resize the window under 424px. I mean the text in the second column related to the image should be on the right side of the image and the text overflowed should wrap under the image (image taken from How to wrap text around an image?)
i.e., col1 and col2 should take half of the widths and the third column col3 should move down and be centered.
Here is the code:
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/*===============
column- Grids
=====================*/
.col {
display: inline-block;
float: left;
margin-right: 4%;
}
.col:last-child {
margin-right: 0;
}
.col1 {width: 4.66%}
.col2 {width: 13.32%;}
.col3 {width: 21.98%;}
.col4 {width: 30.64%;}
.col5 {width: 39.3%;}
.col6 {width: 47.96%;}
.col7 {width: 56.62%;}
.col8 {width: 65.28%;}
.col9 {width: 73.94%;}
.col10 {width: 82.6%;}
.col11 {width: 91.26%;}
.col12 {width: 100%;}
.fancy-title {
font-size: 13px;
color: #c91544;
font-weight: 600;
}
.fancy-heading {
font-size: 32px;
padding-bottom: 50px;
font-weight: 800;
letter-spacing: 2px;
}
.iva-govern {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
position: relative;
list-style-type: none;
}
.govern-data p {
padding-bottom: 20px;
font-size: 14px;
font-weight: lighter;
}
.govern-data img {width: 50%;}
.col5 h5 {padding: 10px 0;}
.govern-contact {
background-color: #142738;
color: #fff;
}
#iva-place {padding: 20px 30px;}
#iva-place li {
padding: 3px 0;
font-size: 13px;
}
#iva-place i {
float: left;
padding: 5px;
width: 20px;
font-size: 15px;
text-align: center;
}
#iva-place p {
display:block;
overflow:hidden;
padding-top: 2px;
}
. >.col3 ul {padding: 20px 10px;}
.iva-govern>.col3 ul li {padding: 6px;}
.iva-govern>.col3 hr {margin: 30px;}
.iva-govern .iva-socials {
padding: 20px 0;
border-top: 1px solid grey;
text-align: center;
}
.iva-govern .iva-socials i:hover {
-webkit-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
transition: all 0.3s linear;
color: #eeeeee;
}
.iva-govern .iva-socials span a {padding: 0 10px;color: #476076;}
@media only screen
and (min-width: 425px)
and (max-width: 767px) {
.section-row {
padding: 40px 0;
}
.iva-govern .col4,
.iva-govern .col5 {
width: 47%;
margin-right: 0;
padding-bottom: 10px;
}
.iva-govern .col3 {
width: 60%;
margin: 0 auto;
}
.govern-images img {
max-width: 300px;
width: 100%;
height: 300px;
}
}<head><script src="https://use.fontawesome.com/a2e210f715.js"></script></head>
<div class="section-row iva-govern">
<div class="section-inner clearfix">
<div class="col col4">
<div class="govern-images">
<img src="https://image.ibb.co/mK6MQb/staff3.jpg" style="width:100%;" alt="mayor">
</div><!--iva govern image-->
</div><!--end of col4-->
<div class="col col5">
<div class="govern-data">
<h4 class="fancy-title">I'M TOWN MAYOR</h4>
<h3 class="fancy-heading">Stephnie Gizzel</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum semper orci quis sem viverra, non iaculis arcu commodo. Praesent orci enim, pretium vel faucibus eget, malesuada a elit. Nulla finibus vulputate tellus placerat cursus. In commodo, leo sit amet suscipit semper, erat justo malesuada lacus, elementum congue ligula metus eu neque. In pellentesque dui urna, nec convallis diam facilisis eget.</p>
<p> Mauris ornare purus vel leo consequat, in cursus sem finibus. In euismod est eget elit ullamcorper cursus. leo consequat, in cursus sem finibus. In euismod est eget elit ullamcorper cursus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce ultricies</p>
<p>best regards,</p>
<img src="assets/images/sign1.jpg" alt="signature">
</div><!--iva govern text-->
</div><!--end of col5-->
<div class="col col3">
<div class="govern-contact">
<div><img src="https://image.ibb.co/iLZKBG/residential2.jpg" style="width:100%;" alt="parliament"></div>
<ul id="iva-place">
<li><i class="fa fa-phone"></i><p>Office: 040-(240) 56052</p></li>
<li><i class="fa fa-envelope-o"></i><p>mayor@urban.com</p></li>
<li><i class="fa fa-map-marker"></i><p>4'th avenue, 6th street, Malboro</p></li>
</ul>
<div class="iva-socials">
<span><a href="https://www.phone.com/"><i class="fa fa-phone"></i></a></span>
<span><a href="https://twitter.com/login?lang=en"><i class="fa fa-twitter"></i></a></span>
<span><a href="https://facebook.com"><i class="fa fa-facebook"></i></a></span>
<span><a href="https://dribbble.com/"><i class="fa fa-dribbble"></i></a></span>
</div>
</div><!--govern contact-->
</div><!--end of col3-->
</div><!--section inner-->
</div><!--section row and iva govern-->