I am using flexbox for styling my pages, I am using three columns in container, second and third columns are just for text and they look great but First column has images, buttons, links,text etc and everything is messed up here nothing is in order, some elements are overlaying each other. I want every new element in new line but that's not so, text and links appear on same line tried <br /> but it just adds little space and doesn't break line.
Code:
<style>
#container{
background-color: #EDEDED;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: flex;
-webkit-flex-flow: row;
-ms-flex-flow:row;
-moz-flex-flow:row;
flex-flow: row;
-webkit-flex:1 0 auto;
-moz-flex:1 0 auto;
-ms-flex:1 0 auto;
flex:1 0 auto;
-webkit-flex-wrap:no-wrap;
-moz-flex-wrap:no-wrap;
-ms-flex-wrap:no-wrap;
flex-wrap:no-wrap;
-webkit-order: 1;
order: 1;
justify-content:flex-start;
align-items:flex-start;
}
.column{
padding: 1rem;
list-style: none;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-flow:row;
-webkit-flex-flow: row;
align-content:flex-start;
align-items:flex-start;
justify-content: space-around;
align-self:stretch;
flex-wrap: wrap;
-webkit-flex-wrap:wrap;
}
</style>
<div id='lhs' class='column' style='width:21%;margin:0px 0px 10px 0px;'> // columns starts
<img src="<?php echo $pic; ?>" />
<b style="font-size:15px;"><?php echo $name ?></b><br />
<i style="font-size:13px;"><?php echo $info; ?></i>
<div>
// php code for calling some functions
<a href=""></a>
</div>