Break <td>s in <tr> to two rows on small screens - html

Question

I want to create layout like this:
Desktop
Mobile
but do not know how to achieve that. So far I have this:
<aside class="container-fluid" role="complementary">
<div class="modal-container ">
<div class="row">
<div class="col-xl-4 col-lg-4 col-md-4 col-sm-6 col-xs-12">
<h2>Name</h2>
<ul class="menu">
<li>Jack</li>
<li>John</li>
<li>James</li>
</ul>
</div>
<div class="col-xl-4 col-lg-4 col-md-4 col-sm-6 col-xs-12">
<h2>Surname</h2>
<ul class="menu">
<li>Sales</li>
<li>Admin</li>
<li>Sales</li>
</ul>
</div>
<div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 col-xs-12">
<h2>Action</h2>
Connect
Connect
Connect
</div>
</div>
<table>
<tr>
<td>Jack</td>
<td>Sales</td>
</tr>
<tr>
<td>Connect</td>
</tr>
<tr>
<td>John</td>
<td>Admin</td>
</tr>
<tr>
<td>Connect</td>
</tr>
<tr>
<td>James</td>
<td>Sales</td>
</tr>
<tr>
<td>Connect</td>
</tr>
</table>
</div>
</aside>
What's the most sane way to achieve these layouts?
(Should it be table combined with flex? Is it ok to use BS grid for this?)

Answer 1

Your total bootstrap grid understanding here is wrong. Also I dont want to write the whole code for you - please understand the concept and implement the mobile layout.
Below is the grid correction for desktop, you have to add more bootstrap classes for making this more responsive.
You don't need tables for this, you can achieve both layouts completely with BS alone.
Run the below snippet, open it full-screen and resize your browser - you will notice the beauty of BS grid
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<aside class="container-fluid" role="complementary">
<div class="modal-container ">
<div class="row">
<div class="col-xs-12">
<h2 class='col-xs-4'> Name</h2>
<h2 class='col-xs-4'> Surname</h2>
<h2 class='col-xs-4'> Action</h2>
</div>
<div class="col-xs-12">
<span class='col-xs-4'>Jack</span>
<span class='col-xs-4'>Sales</span>
<input type="button" value='Connect' class='col-xs-4'/>
</div>
<div class="col-xs-12">
<span class='col-xs-4'>John</span>
<span class='col-xs-4'>Admin</span>
<input type="button" value='Connect' class='col-xs-4'/>
</div>
<div class="col-xs-12">
<span class='col-xs-4'>James</span>
<span class='col-xs-4'>Sales</span>
<input type="button" value='Connect' class='col-xs-4'/>
</div>
</div>
</div>
</aside>

Answer 2

Concept
Make <tr> into a flexbox on smaller screens
#media (max-width: 575.98px) {
.my-table tr {
display: flex;
flex-wrap: wrap;
}
.my-table tr>td:not(:last-child) {
flex: 1;
}
.my-table tr>td:last-child {
width: 100%;
}
}
It looks like
In total
body {
margin: 0;
}
header {
background: #00ADEE;
color: white;
height: 110px;
}
header h1 {
padding: 0.5rem;
margin: 0;
}
.my-table {
width: 50%;
margin-top: -50px;
margin-left: auto;
margin-right: auto;
background: white;
text-align: center;
border-collapse: separate;
border-spacing: 3rem 1.5rem;
border: 2px solid #E7E7E7;
}
.my-table th,
.my-table td {
padding: 0.5rem;
}
.my-table tr>td:last-child>a {
text-decoration: none;
display: block;
color: black;
padding: 0.5rem;
background: #E7E7E7;
}
#media (max-width: 575.98px) {
header h1 {
text-align: center
}
.my-table {
border-spacing: 1.5rem;
}
.my-table thead {
display: none;
}
.my-table tr {
display: flex;
flex-wrap: wrap;
text-align: center;
margin-bottom: 1.5rem;
}
.my-table tr>td:not(:last-child) {
flex: 1;
}
.my-table tr>td:last-child {
width: 100%;
}
}
<header>
<h1>Table Test</h1>
</header>
<table class="my-table">
<thead>
<th>Name</th>
<th>Surname</th>
<th>Action</th>
</thead>
<tbody>
<tr>
<td>Jack</td>
<td>Sales</td>
<td>Connect</td>
</tr>
<tr>
<td>John</td>
<td>Admin</td>
<td>Connect</td>
</tr>
<tr>
<td>James</td>
<td>Sales</td>
<td>Connect</td>
</tr>
</tbody>
</table>
(Change values according to your needs.)
With Bootstrap 3
Center table with offset. Use same concept as above.
body {
margin: 0;
}
header {
background: #00ADEE;
color: white;
height: 110px;
}
header h1 {
padding: 0.5rem;
margin: 0;
}
.my-table {
margin-top: -50px !important;
text-align: center;
background: white;
}
.my-table * {
border: none !important;
}
.my-table th {
text-align: center;
}
.my-table tr>td:last-child>a {
text-decoration: none;
display: block;
color: black;
background: #E7E7E7;
}
#media (max-width: 575.98px) {
header h1 {
text-align: center
}
.my-table thead {
display: none;
}
.my-table tr {
display: flex;
flex-wrap: wrap;
}
.my-table tr>td:not(:last-child) {
flex: 1;
}
.my-table tr>td:last-child {
width: 100%;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<header>
<h1>Table Test</h1>
</header>
<div class="row">
<div class="col-xs-6 col-xs-offset-3 col-sm-6 col-sm-offset-3">
<table class="my-table table">
<thead>
<th>Name</th>
<th>Surname</th>
<th>Action</th>
</thead>
<tbody>
<tr>
<td>Jack</td>
<td>Sales</td>
<td>Connect</td>
</tr>
<tr>
<td>John</td>
<td>Admin</td>
<td>Connect</td>
</tr>
<tr>
<td>James</td>
<td>Sales</td>
<td>Connect</td>
</tr>
</tbody>
</table>
</div>
</div>