Responsive Flexbox

HTML

<br>
<br>
<br>


<div id="Page">
<section class="plop">

  <!-- Bloc Actu -->
  <div class="cadre">
      <div id="Actu-Titre" >Les actus SI+</div>
      <!-- Actu 1 -->
    <div id="Actu-1" class="GrilleY0X0Niveau1">08 avril 2016<br/><a style="text-decoration: none;" href="actus/Pages/SI+_Portail%20L-CRI-Manager.aspx">SI+ La capitalisation de nos faiblesses est désormais outillée grâce au portail L-CRI Manager</a></div>
    <!-- Actu 2 -->
    <div id="Actu-2" class="GrilleY0X0Niveau1">05 avril 2016<br/><a style="text-decoration: none;" href="actus/Pages/Catalogue-des-offres-de-services-standards-du-SI.aspx##">SI+ Catalogue des offres de services standards du SI : Retrouvez les dernières informations ! </a></div>
    <!-- Actu 3 -->
    <div id="Actu-3" class="GrilleY0X0Niveau1">20 janvier 2016<br/><a style="text-decoration: none;" href="actus/Pages/autocontr%c3%b4les-et-Socrate-pour-le-TOP-SOX.aspx">SI+ Symbioz : Quid des autocontrôles et de Socrate pour le TOP SOX ? </a></div>
    <!-- Actu 4 -->
    <div id="Actu-4" class="GrilleY0X0Niveau1">14 janvier 2016<br/><a style="text-decoration: none;" href="actus/Pages/Le-e-learning-BOOLO-est-disponible.aspx">SI+ Symbioz : Le e-learning BOOLO est disponible !</a></div>
    <!-- Actu 5 -->
    <div id="Actu-5" class="GrilleY0X0Niveau1">17 décembre 2015<br/><a style="text-decoration: none;" href="actus/Pages/Newsletters-Symbioz.aspx">SI+ Symbioz : Retrouvez les Newsletters !</a></div>
    <!-- Actu 6 -->
    <div id="Actu-6" class="GrilleY0X0Niveau1">07 décembre 2015<br/><a style="text-decoration: none;" href="actus/Pages/bienvenue-a-Roads.aspx">SI+ Le Plan Global évolue : Bienvenue à Roads</a></div>
    <!-- Actu 7 -->
    <div id="Actu-7" class="GrilleY0X0Niveau1">30 novembre 2015<br/><a style="text-decoration: none;" href="actus/Pages/Symbioz_relais-locaux.aspx">SI+ Symbioz : Des relais locaux pour accompagner les utilisateurs</a></div>
    <!-- bas de page -->
    <div id="Actu-Fin" class="GrilleY0X0Niveau1"><a...

CSS

#Page
{ position: relative;}


/*****************/
/*****************/
/**** Flexbox ****/
/*****************/
/*****************/
*
{ box-sizing: border-box;}
.plop
{ width: 100%;
  min-width: 100%;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;}
.plop > div
{ flex: 1 0 12em;}


/*****************/
/*****************/
/*** Habillage ***/
/*****************/
/*****************/
body
{	padding: 1em;
	font-size: 1.2em;
	font-family: georgia, "trebuchet ms", arial, serif;}
.plop
{ padding: .5em;
  /*border: 1px solid #999;*/
  border-radius: 2px;
  resize: both;
  overflow: auto;
  min-height: 20em;}
.plop > div
{ padding: .3em;
  /*background: #999;*/
  margin-left: 2px;
  margin-right: 2px;
  /*border: 1px solid #999;*/
  border-radius: 2px;}
.cadre
{ border: 1px solid #999;}


/*****************/
/*****************/
/***** Actus *****/
/*****************/
/*****************/
#Actu-Titre
{ width: auto;
  height: auto;
  background-color: #ffffff;
  color: #ff6600;
  text-align: center;}
#Actu-1
{ width: auto;
  height: auto;
  background-color: #eeeeee;
  color: #ff6600;}
#Actu-2
{ width: auto;
  height: auto;
  background-color: #ffffff;
  color: #ff6600;}
#Actu-3
{ width: auto;
  height: auto;
  background-color: #eeeeee;
  color: #ff6600;}
#Actu-4
{ width: auto;
  height: auto;
  background-color: #ffffff;
  color: #ff6600;}
#Actu-5
{ width: auto;
  height: auto;
  background-color: #eeeeee;
  color: #ff6600;}
#Actu-6
{ width: auto;
  height: auto;
  background-color: #ffffff;
  color: #ff6600;}
#Actu-7
{ width: auto;
  height: auto;
  background-color: #eeeeee;
  color: #ff6600;}
#Actu-Fin
{ width: auto;
  height: auto;
  background-color: #ffffff;
  color: #ff6600;
  text-align: center;}


/*****************/
/*****************/
/** Blocs Hover **/
/*****************/
/*****************/
#Blocs
{ width: 100%;
  height: auto;
  background-color: grey;
  border: 1px solid grey;
  text-align: center;
  color: #ffffff;
  font-size:...