I'm just starting with the grids used in Bootstrap and I would like my form to look like this using grid, this for my mobile version.
Currently my desktop version is looking like this:
The following is my HTML code with which I build my form, it is made with the help of PHP in a function:
public function userDate(){
echo '<div>';
echo '<table class="table">';
echo '<tbody>';
echo '<tr>
<td class="columna-titulo">Employee</td><td class="columna-valor">''</td>
<td class="columna-titulo">Name</td><td class="columna-valor" colspan="2">''</td>
<td></td>
</tr>';
echo '<tr>
<td class="columna-titulo">Date</td><td class="columna-valor" id="TdFechaIngreso">''</td>
<td class="columna-tituloYears Old</td><td class="columna-valor">''</td>
<td class="columna-titulo"Department</td><td class="columna-valor">''</td>
</tr>';
echo '</tbody>';
echo '</table>';
echo '</div>';
}
I am supporting myself with the following documentation but I find a solution Documentation Bootstrap
UPDATE:
Performing the first answer, adding .col-sm-12 still no change is reflected in my form
public function userDate(){
echo '<div>';
echo '<table class="table">';
echo '<tbody>';
echo '<tr>
<td class="columna-titulo .col-sm-12">Employee</td><td class="columna-valor .col-sm-12">''</td>
<td class="columna-titulo .col-sm-12">Name</td><td class="columna-valor .col-sm-12" colspan="2">''</td>
<td></td>
</tr>';
echo '<tr>
<td class="columna-titulo .col-sm-12">Date</td><td class="columna-valor .col-sm-12" id="TdFechaIngreso">''</td>
<td class="columna-titulo .col-sm-12">Years Old</td><td class="columna-valor .col-sm-12">''</td>
<td class="columna-titulo .col-sm-12">Department</td><td class="columna-valor .col-sm-12">''</td>
</tr>';
echo '</tbody>';
echo '</table>';
echo '</div>';
}
You know that I have wrong in my code?

