I am using the
core-scaffold
Use the core-media-query element to capture responsive changes:
<core-media-query query="max-width: 600px" queryMatches="{{phoneScreen}}">
</core-media-query>
Use the flex attribute on your columns to get the 50-50 width. Also use the {{phoneScreen}} (set by the core-media-query) to determine if we should use the horizontal layout or not
<div class="row" horizontal?="{{!phoneScreen}}" layout>
<div class="panel" flex>50%</div>
<div class="panel" flex>50%</div>
</div>
Example: http://plnkr.co/edit/WxUFCWFQVMeBgXSLI32M?p=preview