ReactJSとjQueryとmaterializeというjQueryを使ったフレームワークを使ったサイトを作成しています。

そこで質問です。Reactにより生成されるgridにmaterializeによるgridレイアウトを使用していますが、スマホで観た時にグリッドが1カラムになってくれません。しかし、PCのブラウザ(クローム、サファリで確認)では画面幅を小さくした時に1カラム表示となります。画面が大きい場合は3カラムのグリッドです。

このようになってしまう原因としては何が考えられるでしょうか。また、ReactとjQuery(Bootstrapのようなフレームワーク)の共存は不可能なのでしょうか。react-bootstrapなどを使用しなければならないのでしょうか。

以下にReactのコードを示します。一応jQueryがロードされた後にこのコードを実行するようにしましたが、効果ありませんでした。

(function($){
var GridBox = React.createClass({
  loadData: function(){
    $.ajaxSetup({
      cache: false
    });
    $.getJSON(this.props.url, function(json){
      this.setState({data: json});
    }.bind(this));
  },
  getInitialState: function(){
    return {data: {
      "items": []
    }};
  },
  componentDidMount: function(){
    this.loadData();
  },
  render: function(){
    var rows = this.state.data.items.map(function(row){
      return (
          <Row data={row}/>
          );
    });
    return (
        <div>
          <h5>{this.state.data.title}</h5>
          {rows}
        </div>
        );
  }
});

var Row = React.createClass({
  render: function(item){
   var items = this.props.data.map(function(item){
    return (
        <Col item={item}/>
        );
   });
   return (
       <div className="row">
        {items}
        </div>
       );
  }
});

var Col = React.createClass({
  render: function(){
    var imageURL = "dist/images/" + this.props.item.thumbnail;
    return (
        <div className="col s12 m4">
          <div className="card">
            <div className="card-image waves-effect waves-block waves-teal">
              <a href={this.props.item.url} target="_blank">
                <img src={imageURL} className="lazy"/>
              </a>
            </div>
            <div className="card-content">
              <p>{this.props.item.name}</p>
            </div>
          </div>
        </div>
        );
  }
});


ReactDOM.render(
    <GridBox url="data/item.json"/>,
    document.getElementById('item')
    );


})(jQuery);

またこのコードはjsxでコンパイルしたあとでgulpにより、他のJavaScriptファイルと一緒にminify,uglifyして1つのJavaScriptにしてロードしています。