display flex colonne

altra possibilità su colonne

by Andrea Biagi

HTML

<div class="flex-container">
    	<div class="div-1">
        <h2>Titolo h2</h2>
<p>Italia i dati parlano di circa 10mila esemplari di tartarughe carretta morte a cause dell’ingestione dei rifiuti, de traffico nautico o dell’impigliarsi nelle reti dei pescatori,&nbsp;<strong>una strage a cui la marina di Porto Cesareo tenta di porre freno, con un incentivo economico rivolto ai pescatori</strong> che decideranno di salvare le tartarughe che troveranno nelle proprie reti o in stato di difficoltà,&nbsp;se i pescatori trovano degli esemplari malati o impigliati nelle reti, per salvare l’animale devono interrompere la loro attività lavorativa fino alla consegna della tartaruga alle autorità competenti.</p>
   		 </div>		
   	 
    	<div class="div-2">
	  	<p>Italia i dati parlano di circa 10mila esemplari di tartarughe carretta morte a cause dell’ingestione dei rifiuti, de traffico nautico o dell’impigliarsi nelle reti dei pescatori,&nbsp;<strong>una strage a cui la marina di Porto Cesareo tenta di porre freno, con un incentivo economico rivolto ai pescatori</strong> che decideranno di salvare le tartarughe che troveranno nelle proprie reti o in stato di difficoltà,&nbsp;se i pescatori trovano degli esemplari malati o impigliati nelle reti, per salvare l’animale devono interrompere la loro attività lavorativa fino alla consegna della tartaruga alle autorità competenti.</p>
		</div>	
</div>

<div class="flex-container-2">
    	<div class="div-1">
        <h2>Titolo h2</h2>
<p>Italia i dati parlano di circa 10mila esemplari di tartarughe carretta morte a cause dell’ingestione dei rifiuti, de traffico nautico o dell’impigliarsi nelle reti dei pescatori,&nbsp;<strong>una strage a cui la marina di Porto Cesareo tenta di porre freno, con un incentivo economico rivolto ai pescatori</strong> che decideranno di salvare le tartarughe che troveranno nelle proprie reti o in stato di difficoltà,&nbsp;se i pescatori trovano degli esemplari malati o impigliati nelle reti, per...

CSS

.flex-container {
  display: block;
    background-color: red;
}

.flex-container-2 {
  display: block;
    background-color: blue;
}


@media screen and (min-width: 780px) {
  
.flex-container {
  display: flex;
}

.flex-container .div-1 {
  margin-right: 5px;
 
}

.flex-container .div-2 {
  margin-left: 5px;

}

.flex-container-2 {
  display: flex;
}

.flex-container-2 .div-1 {
  background-color: pink;
  float: right;
   
}

.flex-container-2 .div-2 {
  float: left;
  background-color: yellow;
} 
}