Помогите сделать адаптивность блока на CSS

"Не стреляйте в гитариста, он играет, как умеет" (с).

Решила для своего сайта сделать небольшую табличку по типу спойлера, с CSS до этого дела не имела, но вроде получилось. С чем не могу разобраться, так это с адаптивность. Мне нужно, чтобы на десктопе табличка была по правому краю и с обтеканием текста, а на мобильных устройствах, по центру и во весь экран. Каждое из этих условий выполнить могу, но по-отдельности, вместе никак не получается. Подправьте, пожалуйста.

<style>

.demotable {
border-collapse: collapse;
text-align: center;
}
.demotable thead {
font-size: small;
text-align: right;
}
.demotable tbody td, .demotable tbody th {
border: 1px groove #d6d6d6;
}
.demotable tbody tr:nth-of-type(1) th {
background: #292929;
}
.demotable a[href^="#all"], .demotable a[href="#close"] {
text-decoration: none;
border-bottom: 1px dashed;
}

[id^="all"] {
position: fixed;
}
[id^="all"]:target + table a[href^="#all"],
[id^="all"]:not(:target) + table tbody tr:nth-of-type(n+4), 
[id^="all"]:not(:target) + table a[href="#close"] {
display: none;
}

@media screen and (max-width: 479px) {
 width: auto;
 margin: auto;
}
@media screen and (min-width: 480px) {
width: 25%;
float: right; 
  margin: 7px 0 7px 7px;
}
</style>
 
<br id="all1"><table class="demotable">
<thead>
<tr>
<td colspan="3"><a href="#close">свернуть</a><a href="#all1">развернуть</a>
</td></tr></thead><tfoot>
<tr>
<td colspan="3"><a href="#all1">Посмотреть описание</a>
</td></tr></tfoot><tbody>
<tr>
<th>Таблица
</th></tr><tr>
<td>1.1
</td></tr><tr>
<td>2.1
</td></tr><tr>
<td>3.1
</td></tr><tr>
<td>4.1
</td></tr><tr>
<td>5.1

</td></tr></tbody></table>