Cocoonの「2カラム」「3カラム」レイアウトでは、基本的に「タブレット幅（768px以下）」で1カラムになるような仕様になっています
デモ動作はこちら。
記事内を2カラム・3カラム・4カラムに分ける方法
投稿記事内に手軽に2カラム・3カラムレイアウトを挿入する方法です。ビジュアルエディターからクリック操作のみで入力可能です。
wp-cocoon.com
2019.06.06
ただ、中には「タブレット幅（768px以下）でカラムを保ちスマホ幅（480px以下）で1カラムにする」というような動作にしたい方もおられるかと思います。
そういった場合のCSSカスタマイズ方法を紹介します。
＼エックスサーバー開発のWordPressテーマ／
カスタマイズ方法
カスタマイズを行うには、子テーマのstyle.cssに以下のコードを貼り付ければOKです。
/*768px以下*/
@media screen and (max-width: 768px){
.column-wrap{
flex-direction: row;
}
}
/*480px以下*/
@media screen and (max-width: 480px){
.column-wrap{
flex-direction: column;
}
}
デモ
当ページだけに上記のカスタマイズを反映させてあります。
デベロッパーツールなどのモバイル表示確認機能などで、以下の動作を確認してみてください。
2カラム
吾輩は猫である
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当けんとうがつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
走れメロス
メロスは激怒した。必ず、かの邪智暴虐の王を除かなければならぬと決意した。メロスには政治がわからぬ。
3カラム
セロ弾きのゴーシュ
ゴーシュは町の活動写真館でセロを弾く係りでした。けれどもあんまり上手でないという評判でした。
雨ニモマケズ
雨ニモマケズ 風ニモマケズ 雪ニモ夏ノ暑サニモマケヌ 丈夫ナカラダヲモチ 慾ハナク 決シテ瞋ラズ ツモシヅカニワラッテヰル
三四郎
うとうととして目がさめると女はいつのまにか、隣のじいさんと話を始めている。このじいさんはたしかに前の前の駅から乗ったいなか者である。
このカスタマイズが適用されているのは、当ページのみです。
コメント テーマの質問はフォーラムへ
初めまして。
cocoon非常に使いやすく利用させていただいております。
一点、PCとSPのインデックスを別にしたいと考えておりまして、cssなどで変更可能であればご教授いただければとご連絡させていただきました。
具体的にはPCは「縦型カード3列」、SPは「エントリーカード（デフォルト）」に変更したく。
色々検索してみましたが方法が見つからず…お忙しい中申し訳ございませんがよろしくお願いします。
それを100％レスポンシブで実現するには、メディアクエリを書いてCSSを当てていくしかないと思います。
100％レスポンシブではなくPHP側で出力を変更するのであれば、それほど難しくはないかもしれません。
ただ、やり方を書くにしてもコメント欄では機能が弱いので、コメント案内にもあるように、フォーラムに書き込んでいただけると助かります。
https://wp-cocoon.com/community/
※CSSで書く方法は、かなり大変な動作確認作業が必要なため、サポート対象外のものとさせていただきます。
わいひらさん
早速のご回答ありがとうございます！
また、質問する場所が異なり申し訳ございません。
お手数おかけしました。
後ほどフォーラムに書き込みさせていただきますので、
引き続きよろしくお願いします。
やり方を書き込んでおきました。
一応、同様のカスタマイズ目的の検索でこのコメントが引っかかった場合のためにリンクも貼っておきます。
PCとSPのインデックスを別表示させたい | カスタマイズ相談 | Cocoon フォーラム