вот у вас допустим весь дом в body начинает генерироваться динамически и какой-нибудь скрипт обращается к элементу x. Но вот проблема элемента еще нет, и тут не помещение в head или body вам не помогут. defer нужен.
а async не плохо так ускоряет загрузку страницы если знать куда пихать. Например один скрипт красит ссылки в красный цвет, а другой параграфы в зеленый, и допустим у нас всего это овер до***я. Так зачем ждать пока ссылки покрасятся и потом параграфы если они не связаны? Скрипты моно пустить параллельно сэкономив время загрузки.

P.S. Примеры грубые, но наглядные.

смотря на чем делаете. Если бутстрап то так примерно:

<div class=""row>
   <div class="col-lg-4 col-md-12">тут ваш 1 ...</div>
   <div class="col-lg-4 col-md-12">тут ваш 2 ...</div>
   <div class="col-lg4 col-md-12">тут ваш 3 ...</div>
<div>

на медиазапросах своих принцип тот же. (Если я правильно понял вашу задачу).