CSSだけでHTMLの親要素を無視して子要素を独立させることは可能ですか？

はてなブログについての質問です。
はてなブログではHTMLがある程度決まっていて
https://theme-plain.hatenablog.com/entry/hatenablog-html
こちらの記事さんのような構造になっています。
自分はスマホ版の表示をサイドバーの中の検索と関連記事だけを記事上に配置して残りを記事下のままにしたいのですがその場合CSSだけで行うことは可能でしょうか　また不可能かつ他の方法ならできる場合その方法を教えてほしいです。
順番でいうと
ヘッダー
メニュー
関連記事
検索

記事

他のサイドバー

のような感じです。

spookybird

2018/09/10 23:12

まずご自分で勉強しながら挑戦してみてください。話はそれからです。

行動規範の内容に同意します

回答1件

結論から言うと、CSSだけだとかなり厳しいと思います。

CSSは画面の幅に応じてスタイルを切り替えることができます。こんな感じに。

CSS
1@media screen and (max-width: 320px) {
2   /* 表示領域が320px以下の場合に適用するスタイル */
3   div#sidebar { width: 100%; }
4}
5@media screen and (min-width: 800px) {
6   /* 表示領域が800px以上の場合に適用するスタイル */
7   div#sidebar { width: 240px }
8}

(https://allabout.co.jp/gm/gc/396404/から引用)

上記の場合でも、要素の位置を変えることはできないので、難しいと思います。
position:fixed; top:10px;とか言う形で、SP表示の時だけ画面上に固定するなどはできるかと思いますが、
邪魔になると思います。

解決策としては、

CSS
1@media screen and (max-width: 320px) {
2   /* 表示領域が320px以下の場合に適用するスタイル */
3   .sp-only { display: block }
4
5}
6@media screen and (min-width: 800px) {
7   /* 表示領域が800px以上の場合に適用するスタイル */
8   .sp-only { display: none }
9}