I would start by creating two column-oriented grid questions, one for each input type, on the same page. Then add this script to combine them to look like one question:
<script>
$(document).ready(function(){
// Parameters
var gridQ1 = 'Q1';
var gridQ2 = 'Q2';
// Run
if (!$('.mobile_grid').length) {
$('#' + gridQ1 + '_div .inner_table > tbody').append($('#' + gridQ2 + '_div .inner_table > tbody > tr:not(:first-child)'));
}
else {
var mobileGridOptions1 = $('#' + gridQ1 + '_div .mobile_grid_options');
var mobileGridOptions2 = $('#' + gridQ2 + '_div .mobile_grid_options');
for (var i = 0; i < mobileGridOptions1.length; i++) {
$(mobileGridOptions1).eq(i).append($(mobileGridOptions2).eq(i).children());
}
}
$('#' + gridQ2 + '_div').hide();
})
</script>
"Q1" and "Q2" should be replaced with the names of the two questions.