Отображение DIV в коллапсе на маленьком экране, но нормальное на рабочем столе

Question

Я хочу показать таблицу DIV в COLLAPSE, когда кто-то открывает страницу в MOBILE, но в DESKTOP она должна отображаться просто: Таблица БЕЗ свертывания.

<a class="btn btn-primary" data-toggle="collapse" 
  href="#table-collapse" role="button" aria-expanded="false" >
  Hello World
</a>

<table class="table table-borderless" id="table-collapse">
     <tbody>
         <tr>
            <td>Name</td>
            <td>City</td>
            <td>Country</td>
         </tr>
         <tr>
            <td>Name</td>
            <td>City</td>
            <td>Country</td>
         </tr>
    </tbody>
</table>

Answer 1

Этого можно добиться с помощью Bootstrap Display properties.

Я попробовал что-то похожее на то, что вы хотели, используя jQuery и Bootstrap версии 4.

Вот фрагмент. Попробуйте это может быть, это поможет вам.

$("#showTable").click(function(){
    $("#collapsedTable").toggleClass('d-none d-sm-block');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>

<button class="d-block d-sm-none" id="showTable">
  Hello World
</button>

<table class="table table-borderless d-none d-sm-block" id="collapsedTable">
     <tbody>
         <tr>
            <td>Name</td>
            <td>City</td>
            <td>Country</td>
         </tr>
         <tr>
            <td>Name</td>
            <td>City</td>
            <td>Country</td>
         </tr>
    </tbody>
</table>

Примечание: Чтобы проверить фрагмент, откройте фрагмент на полной странице и настройте экран. и кнопка отобразится, когда вы настроите экран на маленький мобильный размер, и таблица будет скрыта в это время. При нажатии кнопки таблица будет переключаться.

Answer 2

Вы должны использовать media queries для этого. Здесь вы можете найти несколько примеров того, как это работает: https://www.w3schools.com/css/css_rwd_mediaqueries.asp

    @media only screen and (max-width: 800px) {
     .small-screen { 
      color: green;
      }
      .big-screen { 
      display: none;
      }
    } 

    @media only screen and (min-width: 800px) {
     .small-screen { 
      display: none;
      }
     .big-screen { 
      color: blue;
      }
    } 

    <table class="small-screen table table-borderless">
         <tbody>
             <tr>
                <td>Name</td>
                <td>City</td>
                <td>Country</td>
             </tr>
             <tr>
                <td>Name</td>
                <td>City</td>
                <td>Country</td>
             </tr>
        </tbody>
    </table>
    
        <table class="big-screen table table-borderless">
         <tbody>
             <tr>
                <td>Name</td>
                <td>City</td>
                <td>Country</td>
             </tr>
             <tr>
                <td>Name</td>
                <td>City</td>
                <td>Country</td>
             </tr>
        </tbody>
    </table>

Если вы запустите этот код на большом экране, содержимое таблицы будет синим, но при изменении размера окна на маленький размер цвет изменится. Я надеюсь, что это объяснит вам, как работают медиа-запросы и как их использовать.