How to move rowspan column to top of the row at mobile screens?

I have the following table.

Now at mobile screens I want to move basic column to top to fit everything to single screen. Becuase it saves left side space.like below

How to do this?

Current Code is below

table {
    border-collapse: collapse;
    width: 100%;
}

th, td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}

th {
    background-color: #f2f2f2;
}

tr:hover {
    background-color: #f5f5f5;
}

td.spec {
    font-weight: bold;
}

td.value {
    font-weight: normal;
}

td.spec {
    border-right: 1px solid #ddd;
    padding-right: 10px;
}

td.value {
    border-left: 1px solid #ddd;
    padding-left: 10px;
}

.i-text {
    font-size: 12px !important;
    color: #6a6565 !important;
}

.table-fix-width {
    width: 250px;
    border-left: 1px solid #ddd;
}

th.group-heading {
    text-align: center !important;
    background-color: #5a5a5a !important;
    color: white;
    border-radius: 8px;
}

<section class="table-responsive">
    <table id="myTable" class="table table-sm">
    <thead>
        <tr>
            <th></th>
            <th></th>
            <th>
                <div class="ui-widget text-left">
                    <i class="i-text">Enter model name or part of it</i><br />
                    <input type="text" id="search" />
                </div>
            </th>
            <th>
                <div class="ui-widget">
                    <i class="i-text">Enter model name or part of it</i><br />
                    <input type="text" id="search2" />
                </div>
               
            </th>
        </tr>
    </thead>
            <tbody>
            <tr>
                <th class="header" rowspan="4">BASIC</th>
                <td class="spec">Capacity</td>
                <td data-label="" class="value">20GB</td>
                <td data-label="" class="value">20GB</td>
            </tr>
             <tr>
                <td class="spec">Name</td>
                <td data-label="" class="value">Product 1</td>
  <td data-label="" class="value">Product 2</td>
            </tr>
                         <tr>
                <td class="spec">Category</td>
                <td data-label="" class="value">TV</td>
         <td data-label="" class="value">TV2</td>
            </tr>
           </tbody>
        </table>
</section>

How to do this?

Solution

so I did a quick search and it turns out that we cannot manipulate rowspan and colspan attributes through css. Even though the solution below works for your use-case, I'd recommend that you perhaps rethink this layout approach. Using tables for layout purposes is an ancient practice and very troublesome. Maybe you can achieve your goals using something like flexbox or grid. Cheers!

html change:

<section class="table-responsive">
    <table id="myTable" class="table table-sm">
    <thead>
        <tr>
            <th class='extra--col'></th>
            <th></th>
            <th>
                <div class="ui-widget text-left">
                    <i class="i-text">Enter model name or part of it</i><br />
                    <input type="text" id="search" />
                </div>
            </th>
            <th>
                <div class="ui-widget">
                    <i class="i-text">Enter model name or part of it</i><br />
                    <input type="text" id="search2" />
                </div>
               
            </th>
        </tr>
    </thead>
            <tbody>
               <tr>
                <th class="header header--desktop" rowspan='4'>BASIC</th>
                <th class="header header--mobile" colspan='4'>BASIC</th>
              </tr>
            <tr>
<!--                 <th class="header" rowspan="4">BASIC</th> -->
                <td class="spec">Capacity</td>
                <td data-label="" class="value">20GB</td>
                <td data-label="" class="value">20GB</td>
            </tr>
             <tr>
                <td class="spec">Name</td>
                <td data-label="" class="value">Product 1</td>
               <td data-label="" class="value">Product 2</td>
            </tr>
            <tr>
              <td class="spec">Category</td>
              <td data-label="" class="value">TV</td>
              <td data-label="" class="value">TV2</td>
            </tr>
           </tbody>
        </table>
</section>

css :


/* new styles */

.header--mobile{
  display: none;
}

@media only screen and (max-width: 600px) {
  .header--mobile{
    display: table-cell;
  }
  .header--desktop,
  .extra--col{
    display: none;
  }
}

Update: I have made the edits based on the change.