通常のCSSではshadowDOM内の要素に対してmediaqueryが使えないらしく、core-media-queryをつかってレスポンシブ化させることになります。

core-media-queryを読み込む

WebComponentですので、まずはコンポーネントを読み込みます。

bowerで導入している場合、使用するhtmlファイルの中に以下のlinkタグを挿入しましょう。
[html]
<link href="../../bower_components/core-media-query/core-media-query.html" rel="import">
[/html]
あとはcore-media-queryタグを挿入するだけで利用可能になります。

core-media-queryでクラスを書き換える

core-media-queryタグは以下の様な記述で使用します。
[html]
<core-media-query query="max-width: 640px" queryMatches="{{phoneScreen}}"></core-media-query>
[/html]

「query」内の条件に一致する（queryMaches）場合に「{{phoneScreen}}」がtrueになります。

サンプルコードでは「640px以下の場合にtrueになる」という内容になっています。

あとはクラスを書き換えたい場所にPolymerの三項演算子を利用したコードを追加しましょう。

[html]
<core-media-query query="max-width: 640px" queryMatches="{{phoneScreen}}"></core-media-query>
<div class="chip {{phoneScreen?’chip-half’:’chip-flex’}}">
640px以下なら「chip-half」クラスを、641px以上ならば「chip-flex」クラスを追加する。
</div>
[/html]
あとはそれぞれのクラスにCSSを記述すればPolymerで作成したサイトをレスポンシブ化させることができます。

HTML属性を書き換える

同じ要領でHTML属性も書き換えられるのかなと思ったのですが、どうもうまくいかない様子でStackoverflowを見ると以下の様な記述にするのが良いみたいでした。
[html]
<div class="card" layout vertical?="{{phoneScreen}}" horizontal?="{{!phoneScreen}}">
641px以上ならばholizontal(flex:row)、
640px以下ならばvertical(flex:column)
</div>
[/html]
html5 – Polymer core-media-query element for responsive layouts – Stack Overflow

作業メモ

クリックしてサンプルサイトをみる。

core-media-queryを利用することで、640px以下のブラウザでは常に２カラム表示になるように調整することができました。

また、クリック後に表示される詳細情報も画像の位置を変更させています。