flex table (row) design

src/Bundle/ChillMainBundle/Resources/public/scss/chillmain.scss

@@ -68,7 +68,11 @@ div#header-accompanying_course-details {
   padding-bottom: 1em;
 }
 
+/*
+*  FLEX RESPONSIVE TABLE/BLOCK PRESENTATION
+*/
 
+/// 1. bloc appearance
 div.flex-bloc {
    display: flex;
    flex-direction: row;
@@ -77,16 +81,22 @@ div.flex-bloc {
    align-content: stretch;
    &.right {
       justify-content: flex-end;
+      div.item-bloc {
+         margin-left: 1em;
+         margin-right: 0;
+      }
    }
    div.item-bloc {
       border: 1px solid #000;
-      margin: 0 1em 1em 0;
+      margin-bottom: 1em;
+      margin-right: 1em;
+      margin-left: 0;
       padding: 1em;
       padding-bottom: 0;
       flex-grow: 0;
       flex-shrink: 0;
       flex-basis: 30%;
-      
+      background-color: #e6e6e6;
       display: flex;
       flex-direction: column;
       h5 {
@@ -114,5 +124,61 @@ div.flex-bloc {
    }
    @media only screen and (max-width: 768px) {
       flex-direction: column;
+      div.item-bloc {
+         margin-right: 0; 
+      }
+      &.right div.item-bloc {
+         margin-left: 0;
+      }
+   }
+}
+
+/// 2. table appearance
+div.flex-table {
+   display: flex;
+   flex-direction: column;
+   align-items: stretch;
+   align-content: stretch;
+   div.item-bloc {
+      border: 1px solid #000;
+      border-top: 0;
+      &:first-child {
+         border-top: 1px solid #000;
+      }
+      &:nth-child(even) {
+         background-color: #e6e6e6;         
+      }
+      padding: 1em;
+      display: flex;
+      flex-direction: row;
+      & > h5 {
+         margin-top: 0;
+         margin-bottom: 0.3em;
+         flex-grow: 0;
+         flex-shrink: 0;
+         flex-basis: 33%;
+      }
+      & > .content-bloc {
+         margin: 0;
+         font-size: 80%;
+         flex-grow: 1;
+         flex-shrink: 0;
+         flex-basis: 50%;
+         dd {
+            margin: 0.67em auto;
+         }
+      }
+      & > ul.record_actions {
+         flex-grow: 0;
+         flex-shrink: 0;
+         flex-basis: 0;
+         margin-top: auto;
+         margin-bottom: 0;
+      }
+   }
+   @media only screen and (max-width: 768px) {
+      div.item-bloc {
+         flex-direction: column;
+      }
    }
 }

src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/index.html.twig

@@ -19,7 +19,7 @@
     {% endif %}
 
     <h2>{{ 'Associated peoples'|trans }}</h2>
-    <div class="flex-bloc right">
+    <div class="flex-table">
     {% for p in accompanyingCourse.participations %}
         {% if p.enddate is null %}
             <div class="item-bloc">
@@ -126,15 +126,15 @@
             </h5>
             <dl class="content-bloc">
 
-                <dd>
-                    <i class="fa fa-fw fa-phone"></i>{{ r.thirdParty.telephone|chill_print_or_message("thirdparty.No_phonenumber") }}
-                </dd>
                 <dd>
                     <i class="fa fa-fw fa-envelope-o"></i>
                     <a href="{{ 'mailto:' ~ r.thirdParty.email }}">
                         {{ r.thirdParty.email|chill_print_or_message("thirdparty.No_email") }}
                     </a>
                 </dd>
+                <dd>
+                    <i class="fa fa-fw fa-phone"></i>{{ r.thirdParty.telephone|chill_print_or_message("thirdparty.No_phonenumber") }}
+                </dd>
                 <dd>
                     {% if r.thirdParty.address == null %}
                         <i class="fa fa-fw fa-map-marker"></i><span class="chill-no-data-statement">{{ 'No address given'|trans }}</span>